JS历史记录如何管理

// 简单示例：点击按钮改变URL和内容
document.getElementById('someButton').addEventListener('click', function() {
    const newState = { page: 'about', id: 123 };
    // 实际应用中URL会更复杂，比如 /products/123
    const newUrl = '/about-us'; 
    history.pushState(newState, '', newUrl);
    // 这里是手动更新页面内容，比如通过AJAX加载或DOM操作
    document.getElementById('content').innerHTML = `<h1>Welcome to ${newState.page} page!</h1><p>ID: ${newState.id}</p>`;
});

// 监听浏览器历史状态变化（用户点击前进/后退按钮时触发）
window.addEventListener('popstate', function(event) {
    // event.state 就是 pushState 或 replaceState 时传入的 state 对象
    const currentState = event.state;
    if (currentState) {
        console.log('Popstate event:', currentState);
        // 根据 currentState 更新页面内容
        document.getElementById('content').innerHTML = `<h1>Navigated to ${currentState.page} page!</h1><p>ID: ${currentState.id}</p>`;
    } else {
        // 处理初始加载或没有state的情况，可能回到首页
        console.log('Popstate event: no state, probably initial load or root.');
        document.getElementById('content').innerHTML = `<h1>Welcome to Home Page!</h1><p>No specific state.</p>`;
    }
});

// 首次加载时处理当前URL：这是一个常见的遗漏点，popstate不会在页面首次加载时触发
// 所以需要根据当前URL来渲染页面
(function() {
    const path = window.location.pathname;
    // 根据path决定渲染哪个组件或内容
    if (path === '/about-us') {
        document.getElementById('content').innerHTML = `<h1>Welcome to About Us page on initial load!</h1>`;
    } else {
        document.getElementById('content').innerHTML = `<h1>Welcome to Home Page on initial load!</h1>`;
    }
})();

pushState

yourdomain.com/products/123

products/123

index.html

index.html