当前窗口的浏览历史 window.history 对象
保存了当前窗口访问过的所有页面网址
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航
history.back() 相当于 history.go(-1)
浏览器工具栏的 “前进” 和 “后退” 按钮，其实就是对 History 对象进行操作
-
// 当前窗口访问过多少个网页 window.history.length // 1 // History 对象的当前状态 // 通常是 undefined，即未设置 window.history.state // undefined
主要有两个属性
- history.length ---- 当前窗口访问过的网址数量（包括当前网页）
- history.state ---- history 堆栈 最上层的状态值
5 个方法
history.back() ---- 移动到上一个网址，等同于点击浏览器的后退键
对于第一个访问的网址，该方法无效果
history.forward() ---- 移动到下一个网址，等同于点击浏览器的前进键
对于最后一个访问的网址，该方法无效果
history.go() ---- 接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址
比如 go(1) 相当于forward() go(-1)相当于back()
如果参数超过实际存在的网址范围，该方法无效果
如果不指定参数，默认参数为 0，相当于刷新当前页面
注意： 移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页
history.pushState() ---- 用于在历史中添加一条记录
window.history.pushState(state, title, url)
不会触发页面刷新，只是导致 history 对象发生变化，地址栏会有反应
使用该方法之后，就可以用 history.state属性读出状态对象
-
var stateObj = { foo: ‘bar‘ }; history.pushState(stateObj, ‘page 2‘, ‘2.html‘); history.state // {foo: "bar"}如果
pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件 - 反过来，如果 URL 的锚点值变了，则会在 history 对象创建一条浏览记录
- 如果
pushState()方法设置了一个跨域网址，则会报错
这样设计的目的是，防止恶意代码让用户以为他们是在另一个网站上
因为这个方法不会导致页面跳转
接受三个参数
state ---- 一个与添加的记录相关联的状态对象，主要用于 popstate 事件
该事件触发时，该对象会传入回调函数
也就是说，浏览器会将这个对象序列化以后保留在本地
重新载入这个页面的时候，可以拿到这个对象。
如果不需要这个对象，此处可以填 null
title ---- 新页面的标题
现在所有浏览器都忽视这个参数，所以这里可以填空字符串
url ---- 新的网址
必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址
假定当前网址是 example.com/1.html
使用 pushState() 方法在浏览记录（history 对象）中添加一个新记录
-
var stateObj = { foo: ‘bar‘ }; history.pushState(stateObj, ‘page 2‘, ‘2.html‘);
加新记录后，浏览器地址栏立刻显示 example.com/2.html
但并不会跳转到 2.html，甚至也不会检查 2.html 是否存在，它只是成为浏览历史中的最新记录
这时，在地址栏输入一个新的地址(比如访问 google.com )，然后点击了倒退按钮，页面的 URL 将显示 2.html
你再点击一次倒退按钮，URL 将显示 1.html
history.replaceState() ---- 用来修改 History 对象的当前记录，其他都与 pushState() 方法一模一样
5
5
5
5
5
5
5
5
5
5
原文地址：https://www.cnblogs.com/tianxiaxuange/p/10317481.html