一、简述
“web存储”机制是一种通过字符串形式的key/value对来安全存储和使用数据的方法。提供了一种新的、可以同时在线或离线使用的网络应用程序。
二、比较
一个cookie至多能存储4KB信息,是暂时性的存储。
web存储则可以更大,对于每个存储区域,可以达到10MB,是永久性的存储。
三、本地存储和本地会话
localStorage:本地存储,没有时间限制的数据存储。
sessionStorage:会话存储,针对一个会话期的数据存储。
四、localStorage
localStorage存储的数据没有时间限制,一年以后,数据依然可用。
创建和访问localStorage
var oStorage = window.localStorage;
oStorage.name="<b>Adiss Lu</b>;
使用window.localStorage属性可用返回与当前域对应的本地存储区域,本地存储区域维护着各种共有或者私有的、可用作长期保存数据的存储空间。可用Chrome的developer tool或firebug查看
五、sessionStorage
window.sessionStorage属性返回在当前页面会话有效期内创建的会话存储区域,只要浏览器没有关闭,一个页面的会话就会始终保持着。
六、Storage接口
支持html5的浏览器都实现了Storage接口。用上面两个属性都能返回一个Storage对象。Storage机制是通过字符串形式的key/value对来存储的。
//设置key值
obj_Storage.key=value;
//获取key值
value = obj_Storage.key;
//获取索引位置的键名
obj_Storage.key(index);
//获取键对应值
obj_Storage.getItem(sKey);
//清除指定的key/value对
obj_Storage.removeItem(sKey)
//添加新键和更新值
obj_Storage.setItem(sKey,sValue)
//清除存储
obj_Sorage.clear()
注意:如果键值的大小超出了存储区域允许的大小,那么就会抛出Out of memory异常,因此在应用方法之前最好使用remainingSpace属性检测存储空间。
七、Storage事件
当使用的存储区域发生变化时还可能触发Storage事件,使用window.onstorage可以捕捉该事件。
如果目标文档不处于活动状态,那么事件不会触发。Storage.setItem、Storage.removeItem和Storage.clear方法都可以触发该事件。
事件对象event可以获取如下属性:
event.key:表示被更改的键
event.oldValue:表示被更改的旧值
event.newValue:表示被更改的新值
event.url:表示发生更改所在的网址
event.storageArea:表示发生更改所在的Storage对象