HTML5 LocalStorage 本地存储

在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例
if(window.localStorage){
 alert(‘This browser supports localStorage’);
}else{
 alert(‘This browser does NOT support localStorage’);
}
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage[“a”]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.a = 3;//设置a为”3″
localStorage[“a”] = “sfsf”;//设置a为”sfsf”,覆盖上面的值
localStorage.setItem(“b”,”isaac”);//设置b为”isaac”
var a1 = localStorage[“a”];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem(“b”);//获取b的值
localStorage.removeItem(“c”);//清除c的值
这里最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。另外,HTML5还提供了一个key()方法,可以在不知道有哪些键值的时候使用,如下:
var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键,再用getItem()方法获得对应的值
  document.write(storage.key(i)+ ” : ” + storage.getItem(storage.key(i)) + “<br>”);
 }
}
存取json
var t = “{‘firstName’: ‘Evis’, ‘lastName’: ‘Wu’, ‘address’: {‘city’: ‘Redmond’,’postalCode’: 98052 }}”;  
localStorage.setItem(“jsondata”,t);
var jsonobj=eval(‘(‘+localStorage.getItem(“jsondata”)+’)’);  
alert(jsonobj.firstName);  
alert(jsonobj.address.city);
/* var t2=”[{name:’zhangsan’,age:’24’},{name:’lisi’,age:’30’},{name:’wangwu’,age:’16’},{name:’tianqi’,age:’7′}] “;  
var myobj=eval(t2);  
for(var i=0;i<myobj.length;i++){  
   alert(myobj[i].name);  
   alert(myobj[i].age);  
}  */

发表评论

邮箱地址不会被公开。 必填项已用*标注