简介
我们开发前端项目的时候时常操作浏览器的前进后退重定向等，这时候我们会想到history这个对象，history是Dom windows的内置对象，它提供了对浏览器的会话历史的访问。它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时提供了对history栈中内容的操作。
常用的history方法
back(), forward()，go()这三个方法能帮我们完成在用户历史记录中向后和向前的跳转，能解决我们大部分需求。
- back()：在history中向后跳转（如同用户点击了浏览器后退按钮）
window.history.back();
- forward()：在history中向前跳转（如同用户点击了浏览器前进按钮）
window.history.forward();
- go()：跳转到 history 中指定的一个点（如向前或向后一个页面）
window.history.go(-1); //后退一个页面
window.history.go(1); //前进一个页面
使用history添加和修改浏览器历史记录中的条目
history.pushState()和history.replaceState()方法它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate配合使用。
history.pushState()
pushState可以添加并激活一个历史记录条目 history.pushState(state, title, url)接受三个参数，
- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
window.history.pushState(null,null,'download?id=1');
var oState= {title: '下载' };
window.history.pushState(oState, '下载', 'download?id=1');
history.replaceState()
replaceState参数和pushState一样，不同点是replaceState是修改当前历史记录条目可以无刷新页面改变url。
window.popstate事件
调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件，只有点击浏览器的前进或后退按钮或者调用（back(), forward()，go()）时，popstate事件被触发，浏览器会到history序列中去找到上一个或下一个state，并且将这个state放到event.state中。这个时候，该state就是当前浏览器所显示的页面所使用的state了，所以使用history.state可以读取到同样的内容。
window.onpopstate = function(event) {
var state = history.state; // 等价于
var state = event.state;
if(state && state.content) $('body').html(state.content);
};
实例理解
假如当前网页地址为 example.com/example.html ,则运行下述代码后:
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
