window.history属性指向 History 对象,它表示当前窗口的浏览历史。
History 对象保存了当前窗口访问过的所有页面网址。使用history.length来查看当前窗口访问历史记录。
属性
History.length:当前窗口访问过的网址数量(包括当前网页)
History.state:History 堆栈最上层的状态值
方法
History.back()、History.forward()、History.go()
History.back() // 移动到上一个网址,等同于点击浏览器的后退键
History.forward() // 移动到下一个网址,等同于点击浏览器的前进键
History.go() // 接受一个整数作为参数,以当前网址为基准,移动到参数指定的网址,比如go(1)相当于forward(),go(-1)相当于back()。如果参数超过实际存在的网址范围,该方法无效果;如果不指定参数,默认参数为0,相当于刷新当前页面。
点浏览器的返回按钮,到之前访问过的页面时,页面通常是从浏览器缓存之中加载,而不是重新要求服务器发送新的网页。
History.pushState()
用于在历史中添加一条记录。
pushState() 需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.
-
状态对象 — 状态对象state是一个JavaScript对象,通过pushState () 创建新的历史记录条目。无论什么时候用户导航到新的状态,popstate事件就会被触发,且该事件的state属性包含该历史记录条目状态对象的副本。
-
标题 — Firefox 目前忽略这个参数,但未来可能会用到。在此处传一个空字符串应该可以安全的防范未来这个方法的更改。或者,你可以为跳转的state传递一个短标题。
-
URL — 该参数定义了新的历史URL记录。新URL不必须为绝对路径。如果新URL是相对路径,那么它将被作为相对于当前URL处理。新URL必须与当前URL同源,否则 pushState() 会抛出一个异常。该参数是可选的,缺省为当前URL。
注意,调用 pushState() 后浏览器的url会发生变化,但并不会立即加载这个URL。
replaceState()
history.replaceState() 的使用与 history.pushState() 非常相似,区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。
参考:
https://javascript.ruanyifeng.com/bom/history.html#
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API