了解HMLT5的同学,对本地存储的强大功能应该都不会陌生,因为它比之前的cookie和session实在是好用太多了。。。
本地存储的具体使用:
推荐使用方便好用的操作方法: getItem()和setItem(), 清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()。
Cookies的用法相对比较麻烦,并且还有个致命的弱点,就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。所以html5中本地存储的出现也算是程序员的福音啦。
好了,废话不多说了,直接上干货:
HTML5中本地存储分为sessionStorage 和 localStorage,二者的区别:
sessionStorage数据的存储在某个会话中,也就是说当浏览器关闭后重新打开这个页面时,之前的保存已经被清除。而localStorage 是一个持久化的存储,它会一直存在,除非手动删除。
sessionStorage和localStorage可以通过数据遍历操作存储的数据,例如:
var storage = window.localStorage;
for (var i=0; i < storage.length; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
}
本地存储的具体使用:
第一步:检测浏览器是否支持本地存储,这里以localStorage为例
if(window.localStorage){
alert('This browser supports localStorage');
}else{
alert('This browser does NOT support localStorage');
}
第二步:异常简化的读取、写、删除等操作
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()。
PS:HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。