怎么使用JavaScript操作浏览器历史记录？

window.history

history.pushState()

history.replaceState()

popstate

history.pushState(state, title, url)

/products

/products/123

const productData = { productId: 123, name: 'Sample Product' };
history.pushState(productData, '', '/products/123');
console.log('URL已更新，但页面未刷新。');

history.replaceState(state, title, url)

pushState

const newFilter = { category: 'electronics', page: 2 };
// 假设当前URL是 /search?q=phone
history.replaceState(newFilter, '', '/search?q=phone&category=electronics&page=2');
console.log('当前历史记录条目已更新。');

window.onpopstate

history.back()

history.forward()

history.go()

popstate

pushState

replaceState

event.state

pushState

replaceState

state

window.addEventListener('popstate', (event) => {
    console.log('popstate事件触发了！');
    console.log('当前状态:', event.state); // 获取pushState/replaceState时传入的state对象

    // 根据event.state或location.pathname来决定渲染哪个组件或内容
    if (event.state && event.state.productId) {
        console.log(`导航到产品页面，ID: ${event.state.productId}`);
        // 实际应用中，这里会根据productId加载并显示对应产品详情
    } else if (location.pathname === '/products') {
        console.log('导航到产品列表页');
        // 加载产品列表
    } else {
        console.log('处理其他路径或默认情况');
    }
});

// history.back() 和 history.forward() 大家都懂
// history.go(-1); // 等同于 history.back()
// history.go(1);  // 等同于 history.forward()

pushState

/articles?page=2

replaceState

history.back()

replaceState

replaceState

/products?category=books&sort=price_asc

pushState

replaceState

pushState

replaceState

example.com

another.com

if (window.history && window.history.pushState) {
    // 可以安全地使用History API
    console.log('浏览器支持History API');
} else {
    // 提供降级方案，比如使用hash模式路由
    console.log('浏览器不支持History API，考虑使用hash路由。');
}

state

state

state

popstate

state

pushState

popstate

popstate

event.state

location.pathname

popstate

pushState

popstate

// 这是一个简化的路由处理函数
function handleRouteChange() {
    const path = location.pathname;
    const state = history.state; // 获取当前历史条目关联的状态对象

    console.log(`当前路径: ${path}, 关联状态:`, state);

    // 根据路径或状态来决定渲染什么内容
    const appContainer = document.getElementById('app');
    if (!appContainer) return;

    if (path === '/') {
        appContainer.innerHTML = '<h1>欢迎来到首页！</h1><p>这是默认内容。</p>';
    } else if (path.startsWith('/products/')) {
        const productId = path.split('/').pop();
        appContainer.innerHTML = `<h1>产品详情页</h1><p>产品ID: ${productId}</p><p>状态数据: ${JSON.stringify(state)}</p>`;
        // 实际中，这里会根据productId从API获取数据并渲染
    } else if (path === '/about') {
        appContainer.innerHTML = '<h1>关于我们</h1><p>我们致力于提供最优质的服务。</p>';
    } else {
        appContainer.innerHTML = '<h1>404 - 页面未找到</h1>';
    }
    // 可以在这里滚动到页面顶部，提供更好的用户体验
    window.scrollTo(0, 0);
}

popstate

window.addEventListener('popstate', handleRouteChange);

popstate

history.go()

/products/123

handleRouteChange

// 页面首次加载时，也需要处理一次路由
document.addEventListener('DOMContentLoaded', handleRouteChange);

pushState

document.addEventListener('click', (event) => {
    // 检查点击的是否是<a>标签，并且有href属性
    const target = event.target.closest('a');
    if (target && target.href) {
        // 确保是站内链接，而不是外部链接或带有hash的链接
        if (target.origin === window.location.origin && !target.hash) {
            event.preventDefault(); // 阻止浏览器默认的页面跳转行为

            const newPath = target.pathname;
            // 可以在这里传递一些与新路径相关的state数据
            history.pushState(null, '', newPath); // 修改URL，添加历史记录
            handleRouteChange(); // 手动调用路由处理函数来更新UI
        }
    }
});

popstate