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对象的拷贝.

演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
<ul class="nav">
  <li data-hash="index">首页</li>
  <li data-hash="news">新闻</li>
  <li data-hash="sports">体育</li>
</ul>
<div class="cont">
  <div data-content="index">首页内容</div>
  <div data-content="news">新闻内容</div>
  <div data-content="sports">体育内容</div>
</div>
<script>
  window.onload=function(){
    var oLi=document.querySelectorAll('li');
    var oCont=document.querySelector('.cont').querySelectorAll('div');
    var iNow=0;
    history.replaceState('index','','?index=5');
    changeCont("index");
    for (var i = 0; i < oLi.length; i++) {
      oLi[i].onclick=function(){
        var hash=this.dataset.hash;
        history.pushState("ddd",'','?'+hash);//第二个参数是标题很多浏览器没实现便可不写，加上第三个参数便可以改变网址，但是是虚假的网址刷新就没有了，所以得配合后端使用
        changeCont(hash);
      }
    };
    function changeCont(hash){//根据hash改变内容
      for(var i=0;i<oCont.length;i++){
        if(hash==oCont[i].dataset.content){
          oCont[i].style.display="block";
        }else{
          oCont[i].style.display="none";
        }
      }
    }
    window.onpopstate=function(ev){
      console.log(1);

      changeCont(ev.state);
    }

  }
</script>
</body>
</html>

history 对象详解

推荐阅读更多精彩内容