加入收藏 | 设为首页 | 会员中心 | 我要投稿 焦作站长网 (https://www.0391zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > MySql教程 > 正文

HTML5 本地存储 LocalStorage详解

发布时间:2020-03-13 21:03:45 所属栏目:MySql教程 来源:站长网
导读:下面小编就为大家带来一篇HTML5 本地存储 LocalStorage详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察键值对的变化,如下表:

 Property    Type    Description  
 key    String  

The named key that was added, removed, or moddified

 
 oldValue    Any    The previous value(now overwritten), or null if a new item was added  
 newValue    Any    The new value, or null if an item was added  
 url/uri    String    The page that called the method that triggered this change  

这里添加两个键值对a和b,并增加一个按钮。给a设置固定的值,当点击按钮时,修改b的值:

JavaScript Code复制内容到剪贴板

<body>  

<p>You have viewed this page <span id="count">0</span>  time(s).</p>  

<p><input type="button" value="changeStorage" onClick="changeS()"/></p>  

<script>  

var storage = window.localStorage;  

if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);  

storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) +1;//必须格式转换  

document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;  

showStorage();  

if(window.addEventListener){  

 window.addEventListener("storage",handle_storage,false);  

}elseif(window.attachEvent){  

 window.attachEvent("onstorage",handle_storage);  

}  

function handle_storage(e){  

if(!e){e=window.event;}  

 showObject(e);  

}  

function showObject(obj){  

//递归显示object  

if(!obj){return;}  

for(var i in obj){  

if(typeof(obj[i])!="object"|| obj[i]==null){  

   document.write(i +" : "+ obj[i] +"<br/>");  

  }else{  

   document.write(i +" : object"+"<br/>");  

  }  

 }  

}  

storage.setItem("a",5);  

function changeS(){  

//修改一个键值,测试storage事件  

if(!storage.getItem("b")){storage.setItem("b",0);}  

 storage.setItem('b',parseInt(storage.getItem('b'))+1);  

}  

function showStorage(){  

//循环显示localStorage里的键值对  

for(var i=0;i<storage.length;i++){  

//key(i)获得相应的键,再用getItem()方法获得对应的值  

(编辑:焦作站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读