html5之LocalStorage与SessionStorage具体研究

html5 之 LocalStorage 与 SessionStorage 具体研究

localStorage 属性允许你访问一个 local Storage 对象。localStorage 与 sessionStorage 相似。不同之处在于，存储在 localStorage 里面的数据没有过期时间（expiration time），而存储在 sessionStorage 里面的数据会在浏览器会话（browsing session）结束时被清除，即浏览器关闭时。

OK,localstorage 和 sessionstorage 算是 html5 中一个特别重要的更新,简单来说呢,就是在游览器中设置了一个类似于后端的 Memcached 或 redis 的这样一个 key,value 结构的缓存或持久化数据库!是不是很强大呢?接下来我们来看看它是怎么用的,很简单有木有?

在存储中设置值

localStorage.setItem(key, value);//存储变量名为 key，值为 value 的变量,变量只能为字符串
localStorage.key = "value"//存储变量名为 key，值为 value 的变量

从存储中获取值

localStorage.getItem("key");//获取存储的变量 key 的值
localStorage.key;//获取存储的变量 key 的值
localStorage.length;//获取当前存储的键值对个数

删除存储

localStorage.removeItem("key")//删除变量名为 key 的存储变量  
localStorage.clear();//清空本地所有数据

以上方法都可以用在 sessionStorage 中,唯一区别是 sessionStorage 在浏览器关闭之后就会全部销毁,而即使浏览器关闭,localStorage 中的数据依然存在
是不是很像 redis 呢?

另外,还有一个事件可以监听 storage 的改变

无论何时，Storage 对象发生变化时（即创建/更新/删除数据项时，重复设置相同的键值不会触发该事件，Storage.clear() 方法至多触发一次该事件），StorageEvent 事件会触发。在同一个页面内发生的改变不会起作用——在相同域名下的其他页面（如一个新标签或 iframe）发生的改变才会起作用。在其他域名下的页面不能访问相同的 Storage 对象。

window.addEventListener('storage', function(e) {  
e.key;//什么键值被改变了
e.oldValue;//旧值
e.newValue;//新值
e.url;//该页面 URL
e.storageArea;//存储对象本身
});

我们可以看到,它就类似于 memcached 一样的 k,v 存储数据库,同样只能存储字符串,那么我们有什么技巧可以让它存储的格式多一些呢?
我们不妨这样做

var stu={  
xiaoming:{name:"小明",age:12},  
xiaoqiang:{name:"小强",age:13}  
xiaohei:{name:"小黑",age:14}  
}//要存储的 JSON 对象  
stu = JSON.stringify(stu);//将 JSON 对象转化成字符串  
localStorage.setItem("stu",stu);//用 localStorage 保存转化好的的字符串

我们取的时候再转回来

var friends= localStorage.getItem("stu");//取回 stu 变量  
stu = JSON.parse(stu);//把字符串转换成 JSON 对象

ok,我们今天就介绍到这里,是不是很简单呢?