WebStorage的使用

HTML5中的WebStorage有两种类型的API：localStorage和sessionStorage；

　　localStorage在本地永久性存储数据，除非显式将其删除或清空；

　　sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。

localStorage存数的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据,储存空间5M。

localStorage提供了几个方法:
1、存储：localStorage.setItem(key,value)

2、获取：localStorage.getItem(key)

3、删除：localStorage.removeItem(key)

4、全部清除：localStorage.clear()

5、遍历localStorage存储的key
　　.length 数据总量，例：localStorage.length
　　.key(index) 获取key，例：localStorage.key(index);

6、存储JSON格式数据
JSON.stringify(data) 将一个对象转换成JSON格式的数据串,返回转换后的数据串
JSON.parse(data) 将数据解析成对象，返回解析后的对象

************************************************************

var array = [0, 1, 1, 1];

//存储，IE6~7 cookie 其他浏览器HTML5本地存储

if (window.localStorage) {

    localStorage.setItem("title", array);

} else {

    Cookie.write("title", array);

}

//获取

var data = window.localStorage? localStorage.getItem("title"): Cookie.read("title");

7、storage事件：当键值改变或者clear的时候，就可以触发storage事件

　　当存储的storage数据发生变化时都会触发它，但是它不同于click类的事件会冒泡和能取消；

　　storage改变的时候，触发这个事件会调用所有同域下其他窗口的storage事件，不过它本身触发storage即当前窗口是不会触发这个事件的（当然ie这个特例除外，它包含自己本身也会触发storage事件）；

　　使用方向，多窗口间多通信等；

　　storage的events对象的属性常用的如下：

　　　　oldValue：更新前的值。如果该键为新增加，则这个属性为null；

　　　　newValue：更新后的值。如果该键被删除，则这个属性为null；
　　　　url：原始触发storage事件的那个网页的网址；
　　　　key：存储store的key名。

　　局限：可能出现大量冗余数据存储，store安全性有限

if(window.addEventListener){

    window.addEventListener("storage",handle_storage,false);

}else if(window.attachEvent){

    window.attachEvent("onstorage",handle_storage);

}

function handle_storage(e){

    if(!e){

        e=window.event;

    }

    //处理事务

}

巴特西

WebStorage的使用

最新文章

热门文章