在网易云课堂上看了妙味课堂的关于html5历史管理的课程,在这里做一下笔记。
单页面或ajax局部刷新的页面中,没有办法通过前一步和后一步得到历史访问数据,此时有两种方法可以解决这个问题:
1.onhashchange事件,示例代码:
<body><input type="button" value="35选7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");var obj={};oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;var oRd=Math.random();obj[oRd]=number;window.location.hash=oRd;}window.οnhashchange=function(){var number=obj[window.location.hash.substr(1)]||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; i++) {arr.push(i);};for (var i = 0; i < now; i++) {newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1))};return newArr;}</script>
</body>
</html>
2.history下的pushstate和popstate事件,示例代码:
<body><input type="button" value="35选7" id="input1"><div id="div1"></div><script type="text/javascript">var oInput=document.getElementById("input1");var oDiv=document.getElementById("div1");oInput.οnclick=function(){var number=randomNumber(35,7);oDiv.innerHTML=number;history.pushState(number,'');}window.onpopstate=function(ev){console.log(1);var number=ev.state||'';oDiv.innerHTML=number;}function randomNumber(alls,now){var arr=[];var newArr=[];for (var i = 1; i <= alls; i++) {arr.push(i);};for (var i = 0; i < now; i++) {newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1))};return newArr;}</script>
</body>
</html>
几点说明:
1.hash就是url中#和它后面的内容
2.必须把hashchange事件处理程序添加给window对象,然后url参数列表只要变化就会调用它。
3.pushstate方法接收三个参数:数据,标题(都没实现,实际开发中一般为‘’),地址(可选)
4.popstate事件读取数据用event.state