大部分来自 mdn 上原文,但是 mdn 上顺序叙述不清晰,自己重新整理了一下自己的阅读笔记
window 对象通过 history 对象提供了对浏览器的回话历史的访问。它暴露了很多有用的方法和属性,允许你在用户浏览历史中向前和向后跳转。从 HTML5 开始——提供了对 history 栈中内容的操作。
获取当前状态
可以读取当前历史记录项的状态对象 state,而不必等待 popstate 事件,只需要使用 history.state 属性
这里引申出了 popstate 事件,所以插入讨论一下 popstate:
当活动历史记录条目更改时,将触发 popstate 事件。如果被激活的历史记录条目是通过对 history.pushState()的调用创建的,或者受到对 history.replaceState()的调用的影响,popstate 事件的 state 属性(event.state)包含历史条目的状态对象的副本。
需要注意的是调用 history.pushState() 或 history.replaceState() 不会触发 popstate 事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在 Javascript 代码中调用 history.back())
window.onpopstate = function(event) {
alert(“location: ” + document.location + “, state: ” + JSON.stringify(event.state));
};
history.pushState({page: 1}, “title 1”, “?page=1”);
history.pushState({page: 2}, “title 2”, “?page=2”);
history.replaceState({page: 3}, “title 3”, “?page=3”);
history.back(); // alerts “location: http://example.com/example.html?page=1, state: {“page”:1}”
history.back(); // alerts “location: http://example.com/example.html, state: null
history.go(2);
在 history 中跳转
使用 back(), forward() 和 go() 方法来完成在用户历史记录中向后和向前的跳转。
可以通过查看长度属性的值来确定的历史堆栈中页面的数量:
window.history.length
添加和修改历史记录中的条目
HTML5 引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与 window.onpopstate 配合使用。
使用 history.pushState() 可以改变 referrer(报文头,用来指明当前流量的来源参考页),它在用户发送 XMLHttpRequest 请求时在 HTTP 头部使用,改变 state 后创建的 XMLHttpRequest 对象的 referrer 都会被改变。因为 referrer 是标识创建 XMLHttpRequest 对象时 this 所代表的 window 对象中 document 的 URL。