首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage。
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
sessionStorage与 localStorage 的异同
sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。
sessionStorage临时保存即当浏览器关闭时,保存数据会销毁保存方法:
sessionStorage.setItem('key','value');// 或 sessionStorage.key = value;
读取方法:
变量 = sessionStorage.getItem('key') //或 变量 = sessionStorage.key;
localStorage 永久保存 即将数据保存在客户端本地的硬件设备中,即使浏览器关闭,数据仍然存在。
保存方法:
localStorage.setItem('key','value'); // 或localStorage.key = 'value'
读取方法:
变量 = localStoragekey.getItem('key'); // 或localStorage.key
清除方法:
localStorage.removeItem("key");
ps: 如果希望一次性清除所有的键值对,可以使用clear()。
例子:
localStorage.k = 1;//设置k为"1"
localStorage["k"] = "sfsf";//设置k为"sfsf",覆盖上面的值
localStorage.setItem("e","isaac");//设置e为"isaac"
var a1 = localStorage["k"];//获取k的值
var a2 = localStorage.k;//获取k的值
var b = localStorage.getItem("e");//获取e的值
localStorage.removeItem("c");//清除c的值
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历
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本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()清除一下就可以了。
最后说一下storage 事件
在存储事件的处理函数中是不能取消这个存储动作的。storage事件只是浏览器在数据变化发生之后给 你的一个通知。我们可以在这个事件中处理当修改存储后所要执行的处理;
window.addEventListener('storage',function(){
// 当sessionStorage 或 localSetorage 的值发生变化时所要执行的处理。
},false)
在事件处理函数中,触发事件的事件对像(event)具有如下属性
- storageArea: 表示存储类型(Session或Local)
- key:发生改变项的key
- oldValue: key的原值
- newValue: key的新值
- url*: key改变发生的URL