一、历史记录前进与后退
1.后退：
window.history.back() -- 相当于用户在浏览器的工具栏上点击返回按钮；
2.前进：
window.history.forward() -- 相当于用户在浏览器的工具栏上点击前进按钮；
3.移动到指定历史记录点：
通过go()方法，指定一个相对于当前页面位置的数值，从当前会话的历史记录中加载页面（当前位置页面索引：0，上一页：-1，下一页：1）；
window.history.go(-2)--后退2页，相当于调用两次back();
window.history.go(1)--前进1页，相当于调用forward();
*可以通过window.history.length，得到历史记录栈中一共有多少页。
【操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState（）】二、添加/修改历史记录条目
1.pushState(stateObject,title,URL):
逐条添加历史记录条目，
a.状态对象（stateObject）--一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝；（ps:FireFox浏览器强行限制状态对象的大小为640k，超出则抛异常，可通过sessionStorage或localStorage存储大的数据）
b.标题（title）--传入一个简短的标题，标明将要进入的状态；（FireFox浏览器目前会忽略该参数，但是传一个空字符串会比较安全）
c.地址（URL）--新的历史记录条目的地址（可选，不指定的话则为文档当前URL）；浏览器不会在调用pushState()方法后加载该地址；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。
*某种意义上，调用pushState()有点类似于设置window.location='#foo'，它们都会在当前文档内创建和激活新的历史记录条目。
（拓展：window.location--待研究）
2.replaceState():
history.replaceState()操作类似于history.pushState()，不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。
3.popstate():
每当激活的历史记录发生变化时，都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建，或是被replaceState方法影响到的，popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。
读取当前状态：
如果页面中使用pushState()或replaceState()方法设置了一个状态对象，然后用户重启了浏览器。当页面重新加载时，页面会触发onload事件，但不会触发popstate事件。可以使用history.state直接读取当前历史记录条目的状态，而不需要等待popstate事件。
调用history.pushState()或者history.replaceState()不会触发popstate事件.pushState事件只会在其他浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法)。
调用方法:
window.onpopstate = function(event) {
//做一些操作
event.state;
//当前历史记录条目的状态
};
或者：
window.addEventListener('popstate', function(event) {
//做一些操作
});
转自：https://www.cnblogs.com/xieyaoming/p/5789630.html
推荐阅读
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- 接口|axios接口报错-参数类型错误解决
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- vue|Vue面试常用详细总结
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- css|我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧（）
- css|css三角的做法及其案例