HTML5历史存储

前端之家收集整理的这篇文章主要介绍了HTML5历史存储前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

HTML5实现历史存储的方法

1.通过onhashchange实现

当hash值发生变化的时候,就会触发onhashchange事件

 var btn=document.querySelector('#btn');
            var input=document.querySelector('#input');
            var num;
            //hash
            btn.onclick=function(){
                num=Math.floor(Math.random()*10);
                window.location.hash=num;//将数据存储在hash
                input.value=num;
            };
            window.onhashchange=function(){
                var num=window.location.hash.substring(1);//取数据
                input.value=num;
            };

2.通过history实现

存数据history.pushState( a,b,c) 三个参数 数据 标题(都没有实现) 网址()可选
取数据: window.onpopstate=function(e){

       Var num=e.state;   //在这里取数据  然后下面操作 

}

—注意:网址是虚假的,需要在服务器指定对应的页面,不然刷新找不到页面

//history
            btn.onclick=function(){
                num=Math.floor(Math.random()*10);
                history.pushState(num,'');
                input.value=num;
            };
            window.onpopstate=function(e){
                var num=e.state;
                input.value=num;
            };
原文链接:https://www.f2er.com/note/422079.html

猜你在找的程序笔记相关文章