pushState 和 replaceState

使用此方法浏览器前进后退仍然可查看对应内容

两个方法的主要区别就是：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/

转载于:https://www.cnblogs.com/huangxiaowen/p/6225918.html