javascript history对象详解

【state】

history.state属性返回当前页面的state对象

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

【popstate事件】

每当同一个文档的浏览历史(即history对象)出现变化时，就会触发popstate事件

需要注意的是，仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用javascript调用back()、forward()、go()方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发

使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象(即这两个方法的第一个参数)

window.onpopstate = function (event) {
 console.log('location: ' + document.location);
 console.log('state: ' + JSON.stringify(event.state));
};　　

上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象

这个state对象也可以直接通过history对象读取

var currentState = history.state;

往返缓存

默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面

无相关信息