使用此方法浏览器前进后退仍然可查看对应内容
两个方法的主要区别就是:pushState()是在history栈中添加一个新的条目,replaceState()是替换当前的记录值。用pushState的时候会产生一条新的history,replaceState则不会产生。
设置值
history.pushState({}, "页面标题", "xxx.html");
history.replaceState(null, "页面标题", "xxx.html");
比如设置 history.pushState({},"","#2"); 获取location.hash == “2”
某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:
- 新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的
document
中。 - 根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。
- 你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。
注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。
参考地址https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
张鑫旭 http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/