h5-history解析

这是一个不太常用的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发生改变的时候，触发的方法
	})

popState和hashchagne方法比较

• popState是url发生改变时触发，并且执行顺序上，popState优先于hashchange
• hashchange只有在锚点发生变化时候才能触发，如果，url没有设置锚点，则监测不到。
• 综上所述，popState更加常用，一些复杂场景需要配合使用。