很多人对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>
网友评论