history 对象详解

很多人对history对象不是特别了解，今天我总结了下，这个也是面试的重点。
基础的history对象的方法：
在w3c文档中我们很容易学习到一些的基础用法，在这里我也总结下。

Paste_Image.png

这个属性和用法比较简单，在这里就不贴出案例了。

如果想回退两步可以

Paste_Image.png

接下来我介绍下其他的history对象的属性和方法：
history.pushState(state,title,url)
history.replaceState 与history.pushState一样
onpopstate： 浏览器的前进与后退，会触发window.onpopstate事件
参数介绍

• state对象 –state对象是一个JavaScript对象，它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史 记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数 值，则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储，请使用本地存储。
• title—firefox现在回忽略这个参数，虽然它可能将来会被使用上。而现在最安全的使用方式是传一个空字符串，以防止将来的修改。或者可以传一个简短的标题来表示state
• URL—这个参数用来传递新的history实体的URL，注意浏览器将不会在调用pushState()方法后加载这个URL。但也许会过一会尝试加载这个URL。比如在用户重启了浏览器后，新的url可以不是绝对路径。如果是相对路径，那么它会相对于现有的url。新的url必须和现有的url同域，否则pushState()将抛出异常。这个参数是选填的，如果为空，则会被置为document当前的url。

在onpopstate事件中的事件对象 有。popstate事件的（e.state）属性会包含一份来自history实体的state对象的拷贝.

演示代码：

  
  



  
首页
  
新闻
  
体育


  
首页内容
  
新闻内容
  
体育内容