JS--history--使用/教程/实例
原文网址：JS--history--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍JavaScript中history的用法。
History 对象是浏览器模型中的一个对象，表示当前窗口的浏览历史，通过 window.history 获取。一个浏览器窗口从被打开时开始，所有访问过的页面地址都会保存在 History 对象中。
若 URL 的锚点值改变，也会在 History 对象中创建一条浏览记录。比如：http://www.abc.com/#/hello变成了http://www.abc.com/#/hi
从HTML5开始提供了对history栈中内容的操作：pushState、replaceState方法。
共有五个方法：back(), foreword(), go(), pushState(), replaceState()。所有方法都只修改当前url，不会向后端发起请求。
官网网址
History API - Web API 接口参考 | MDN
相关网址
JS--popstate事件--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
属性
History.length （只读）
返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。
允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。可选值：自动（auto）/手动（manual）。
History.state （只读）
返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popState而查看状态的方式
方法（前进/后退）
出于安全考虑，History对象不允许未授权代码访问会话历史（session History）中其它页面的URLs，但可以导航到其它会话历史（session History）指向的页面。
如果想要在调用这几个方法时有一些操作（比如发起请求），只需监听popstate事件。例如：window.addEventListener("popstate", fun)
history.back()
作用
访问前一个浏览的页面（后退）。（浏览器浏览器左上角的返回按钮(←)就是调用的此方法）。
说明
等价于 history.go(-1)。
当浏览器处于第一页时调用此方法没有效果，而且也不会报错。
history.foreward()
作用
访问后一个浏览的页面（前进）。（浏览器浏览器左上角的前进按钮(→)就是调用的此方法）。
说明
等价于 history.go(1)。
当浏览器处于最顶端时( 页面处于最后一页时 )调用此方法没有效果，也不报错。
history.go(num)
作用
跳到基于当前页的指定位置。
示例
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);如果num不传，即：history.go()，它等价于history.go(0) ，表示刷新当前页面。
//刷新当前页面
history.go(0);注意: IE 支持传递URLs作为参数给 go(); 这在Gecko是不标准且不支持的。例如：
//跳转到最近的abc.com 页面
history.go("abc.com");方法（修改历史记录）
history.pushState()
用法
history.pushState(state, title, url)
- state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
- title：新页面的标题。现在所有浏览器都忽视这个参数，所以可以填空字符串。
- url：新的网址。浏览器的地址栏将显示这个网址。必须与当前页面处在同一个域，否则会报错。
作用
在历史中添加一条记录。
说明
pushState()方法不会触发页面刷新，只是导致 History 对象发生变化，地址栏会有反应。
示例
假定当前网址是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是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址(比如访问baidu.com)，然后点击了倒退按钮，页面的 URL 将显示2.html；再点击一次倒退按钮，URL 将显示1.html。
如果pushState()方法设置了一个跨域网址，则会报错：
// 当前网址为 http://example.com
history.pushState(null, '', 'https://abc.com/hello');
history.replaceState()
用法
history.replaceState(state, title, url)
参数含义和history.pushState(state, title, url) 相同。
作用
修改 History 对象的当前记录。
示例
假定当前网页是example.com/example.html。
history.pushState({page: 1}, 'title 1', '?page=1')
// URL 显示为 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 显示为 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 显示为 http://example.com/example.html?page=3
history.back()
// URL 显示为 http://example.com/example.html?page=1
history.back()
// URL 显示为 http://example.com/example.html
history.go(2)
// URL 显示为 http://example.com/example.html?page=3