浏览器history对象的几个新方法

history对象很早以前就有了，它的功能是操作网页的历史记录。传统的history对象有：back、forward、go，这几个方法，它们用来 前进、后退，或直接跳转到历史记录的某一个步骤。而现代浏览器加入了pushState和replaceState，使用它们则可以直接对历史记录堆栈进 行操作。
　　pushState方法的功能是在历史记录队列堆栈中加入一个新的记录，并把当前页面“跳转”到这个自己添加的“虚假”历史记录上。由于历史记录是 “虚假”的，页面不会真正的跳转，而是地址栏里的URL发生变化。可以点击浏览器上的后退按钮来返回“跳转”前的页面。pushState方法有3个参 数，第一个是数据参数，这个后面再说；第二个是历史记录的标题，这个参数貌似只是作为保留参数，目前的浏览器暂时不处理它，所以直接传如null就可以 了；第三个参数是这个历史记录URL，也就是可以改变浏览器地址栏的URL，它可以使用绝对路径，但是不能跨域。
　　replaceState方法的功能是修改当前页历史记录的数据。与其说是修改，不如说是创建一个新的“虚假”历史记录，把当前的历史记录替换掉。和 上面的pushState一样，由于是“虚假”的，所以替换之后地址栏的地址会改变，但是页面不会跳转。这个函数的参数和pushState一样，就不重 复了。其实pushState和replaceState的区别只是，前者在地址栏URL改变后可以通过浏览器的后退按钮返回跳转前的网页，而后者不行。
　　接着来说说这个两个方法的第一个参数。这是一个数据参数，输入的东西是用户自己要保存的数据。现代浏览器的history对象中不仅仅是一个名称和一 个URL，还有这个数据部分。也就是说，历史记录中还会留下上次访问那个页面时候在页面上留下的数据，当我们后退或者跳转回某个历史记录步骤的时候，就可 以操作之前在这个页面上留下的数据。而这个参数就是设置我们制造的“虚假”历史记录里的数据，如果不用它可以直接送上一个null。
　　历史记录数据的访问可以通过history对象的state属性。对于这个state，其实老外觉得它就是一个页面状态而已，我觉得理解为历史记录数据部分会更好，下面是个实例，其实也没啥太多东西。看看实例自己修改参数测试下就能明白。

<script>
//页面点击事件
document.onclick=function(){
  //输出当前页面的历史记录数据部分
  console.log(history.state);
  //创建一个“虚假”历史记录，并访问它
  history.pushState("次碳酸钴",null,"我是新的页面.html");
  //由于刚已经访问了新的历史记录
  //这里应该是输出我们刚创建的“虚假”历史记录的数据部分
  console.log(history.state);
};
</script>

 

原文：http://www.web-tinker.com/article/20140.html