HTML5 本地存储 LocalStorage详解

2020-04-25 08:02:12易采站长站整理
 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++){