[Web存储] html5 的 Web存储

一、概念

sessionStorage：本地会话存储，和当前会话有关，会话结束存储销毁 ，不是一种持久存储方式。

localStorage：    本地持久存储，只要不手动清理，一直存在。

 

二、与Cookie区别

 

cookie:

    1. 大小受限制

    2. 请求新页面cookie会被发送过去，浪费流量

    3. 需要指定作用域，不可以跨域调用

    4. 开发者自己封装setCookie、getCookie方法

    5.*不可或缺，为与服务器交互而设计

webStorage:

    1. 为大容量数据存储而设计（目前浏览器普遍支持2M~5M的存储，具体存储大小适浏览器检测时为准）

    2. 已拥有了getItem、setItem、removeItem、clear方法

 

三、浏览器兼容情况

 

除IE7以下不支持外，其他浏览器均支持。

判断：if(window.localStorage){alert("支持 localStorage")}else{alert("不支持 localStorage")}

 

如遇到低版本的浏览器不支持localStorage，可使用dojo，做兼容，dojo是一款javaScript的插件。

代码资料：http://developer.51cto.com/art/201107/278569_1.htm

 

四、操作方式

 

点操作、[]操作、方法操作：

    var storage=window.localStorage;

    storage.key1="value1";

    storage["key2"]="value2";

    storage.setItem("key3","value3")

 

五、存储方式

任何数据类型在Storage对象中都是以字符串的格式存储的。所以在将不是字符串格式的数据存储在locaStorage中时，一定要先将格式转为字符串格式。这里我们可以使用JSON()方法将对象序列化。

 

JSON.parse() 将对象序列化；JSON.stringify()将对象反序列化；

 

六、storage 事件

 

当存储在storage中的数据发生改变时，会触发当前窗口除外的storage事件。

 

代码如下：

if(window.addEventListener)

{

     window.addEventListener("storage",function(e) { alert(e.newVal) });

}

else if(window.attachEvent)

{

    window.attachEvent("storage",function(e) { alert(e.newVal) });

}

 

window.localStorage.setItem("key1","value1");

 

 

六、用途

 

1. 左垂直菜单，当点击某一级后，刷新页面，该菜单级仍然是展开的。像这样的数据，京东"个人中心"的的处理方式是将用户的记录存入到Cookie中，我们这里可以存储在localStorage中。

2. 利用storage回调事件，实现多窗口间通信

 

七、举例

 

//存储数组，遇到 IE6，IE7时，使用Cookie存储

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

if (window.localStorage)

    window.localStorage.setItem("myData",array);

 

else

    Cookie.write("myData":"array");

 

//使用

var myData=(window.localStorage)?window.localStorage.getItem("myData"):Cookie.write("myData");

 

八、目前仍然未解决问题

 

1. 不同浏览器间存储的 localStorage 是否可以相互访问？

答：显然是不能的，不同的浏览器接入localStorage的方式是不一样的，呈现的存储空间大小适不一样的。

 

2. 同浏览器，不同域名下localStorage可以共享数据吗？

答：不可以的，只有在同域名同浏览器localStorage的数据才可以共享。

 

3. 同页面下不能监听事件storage无效，那么如何自己构建监听事件，做到在同页面也可以同样监听呢？

答：（暂时未解决）