首页 > 代码库 > HTML5 LocalStorage 本地存储原理详解
HTML5 LocalStorage 本地存储原理详解
首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例。
if(window.localstorage){
alert(‘this brower supports localstorage‘);
}else{
alert(‘this brower not supports localstorage)
}
存储数据的方法就是直接给window.localStorage添加一个属性,例如:window.localStorage.a 或者 window.localStorage["a"]。它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:
localStorage.setItem("a","isaac");//设置a的值为"isaac"
var a = localStorage.getItem("a");//获取a的值
localStorage.removeItem("a");//清除a的值
最推荐使用的自然是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>")
}
}
需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。这也就是上一段代码中parseInt必须要使用的原因。
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。
HTML5 LocalStorage 本地存储原理详解