这是一个不太常用的api,但有一些场景比较适用,比如说,某用户填写了一个很复杂的表单,点了一下回退,就回退了一个网页,那用户的填写的所有信息都没了,那么,history就可以派上用场了 我们来看一下这个实例把
<input type="text" id="search"/>
<button id="btn"></button>
<div id="main"></div>
var oInput = document.getElementById("search");
//造假数据
var data = [{
name: "html"
},
{
name: 'css'
},
{
name: 'js'
},
{
name: 'panda'
},
{
name: 'monkey'
}
];
function search(){
var inpValue = oInput.value;
var res = data.filter(function(ele){
if(ele.name.indexOf(inpValue) > -1){
return ele;
}
})
//做兼容性处理,如果输入框为空展示所有列表
if(inpValue == ""){
res = data;
}
history.pushState({inpVal:inpValue}, null, "#" + inpValue);
render(res);
}
function render(renderData){
var content = '';
for(var i = 0; i < renderData.length; i++){
content += "<div>" + renderData[i].name + "</div>";
}
document.getElementById("main").innerHTML = content;
}
window.addEventListener("popState", function(e){
oInput.value = e.state.inpVal;
//这里不能直接调用Search方法,因为调用会push进state中
var res = data.filter(function(ele){
if(ele.name.indexOf(oInput.value) > -1){
return ele;
}
})
if(oInput.value== ""){
res = data;
}
render(res);
})
上述代码可以达到前进后退效果,如果有同学代码贴过去报错,可以评论,会修复
这里还需要补充一个方法。监听锚点的变化
window.addEventListener("hashchange", function(e){
//此方法锚点,或者hash发生改变的时候,触发的方法
})