js popstate

// 使用 popstate 事件的示例代码

// 首先，我们设置一些历史记录条目
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");

// 添加 popstate 事件监听器
window.addEventListener('popstate', function(event) {
    // 当用户点击浏览器的前进或后退按钮时触发此事件
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

// 模拟用户点击后退按钮
history.back(); // 这将触发 popstate 事件

// 解释说明：
// 1. history.pushState() 方法会在浏览历史中添加新的记录，并不会导致页面刷新。
// 2. history.replaceState() 方法会替换当前的历史记录条目，也不会导致页面刷新。
// 3. window.addEventListener('popstate', ...) 监听 popstate 事件，当用户通过浏览器的前进或后退按钮导航时触发。
// 4. 在 popstate 事件的回调函数中，可以通过 event.state 获取到之前 pushState 或 replaceState 时传递的状态对象。