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

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

posted on 2016-12-27 14:58  小海豚Dolphins  阅读(694)  评论(0编辑  收藏  举报