HTML5 History API

在 HTML5 的 History API 中，pushState 和 replaceState 方法也可以接受一个 state 对象作为参数。这些方法允许你在改变浏览器路由时不重新加载页面，并且可以附加一些自定义数据。

state

返回在 history 栈顶的 任意 值的拷贝。

let currentState = history.state;

结合router.push 方法来实现导航并传递状态

    router.push({
      path: '/xxx', state: {
        userId: '123', token: 'abc123'
      }
    });

存储和修改的状态对象

pushState

向浏览器的会话历史栈增加了一个条目。

pushState(state, unused)
pushState(state, unused, url)

1. state：一个JavaScript对象，表示新的历史状态。这个对象可以包含任意的数据，用于保存页面的状态信息。
2. title：新的历史记录的标题，但大多数浏览器忽略这个参数。
3. url：新的历史记录的URL，可以是相对URL或绝对URL，但不能跨域。

history.pushState({page: 1}, "Page 1", "/page1");
// 这将添加一个新的历史记录，URL为/page1，状态对象为{page: 1}。

// 假设当前的 history.state 是这样的
const currentState = history.state || {};

// 获取时间的值
const Time = time.value;

// 创建新的 state 对象
const newState = {
  ...currentState,  // 保留当前的 state
  Time: Time ,
};

// 使用 history.pushState 更新 state 并添加新条目
history.pushState(newState, document.title);

replaceState

使用状态对象和 URL 作为参数来修改当前的历史记录条目。

replaceState(state, unused)
replaceState(state, unused, url)

1. state：一个JavaScript对象，表示要替换的历史状态，状态对象可以是 null。
2. title：新的历史记录的标题，但大多数浏览器忽略这个参数。
3. url：替换后的URL，不能跨域。

使用demo

// 假设当前的 history.state 是这样的
const currentState = history.state || {};
 
// 获取时间的值
const Time = time.value;

// 创建新的 state 对象
const newState = {
  ...currentState,  // 保留当前的 state
  Time: Time ,
};

// 使用 history.replaceState 更新 state 而不改变 URL
history.replaceState(newState, document.title);

锚点导航附带信息

function scrollToSection(sectionId, additionalData) {
  window.location.hash = sectionId;

  // 存储额外的状态信息
  window.sessionStorage.setItem(`section-${sectionId}-state`, JSON.stringify(additionalData));
}

scrollToSection('#about-us', { timestamp: Date.now(), scrollPosition: window.scrollY });

// 监听 hashchange 事件以恢复状态
window.addEventListener('hashchange', () => {
  const currentHash = window.location.hash.substring(1);
  const storedState = sessionStorage.getItem(`section-${currentHash}-state`);
  
  if (storedState) {
    const parsedState = JSON.parse(storedState);
    console.log('Restoring state for section:', currentHash, parsedState);
    // 执行相应的操作
  }
});

更多学习

History：pushState() 方法 - Web API | MDN

History：replaceState() 方法 - Web API | MDN