HTML5之客户端存储（Storage）

• 关于客户端存储技术
• storage

 一、关于客户端(浏览器)存储技术

浏览器的存储技术第一个能想到的应该就是cookie，关于cookie本身出现的初衷是为了解决客户端识别，可存储信息量小（4k左右），并且每次网络请求都会被请求协议携带发送到服务器，这在一定程度上是比较浪费网络资源，损耗性能。

在HTML5中提供了一个新的客户端存储技术Storage：

 

cookie与storage的异同：

相同点：同样受同源策略影响，只有在域名一致的情况下才能查看到对应的数据。

不同点：

1.cookie的数据存储量在4K左右，storage的存储量大约在5MB左右；

2.navigator.cookieEnabled检测是否启用了cookie，也就说cookie可以认为控制是否启用。storage则是自动启用，不会被人为关闭。

3.coocie中不建议使用分号、逗号、空格等特殊字符；如果需要使用可以使用转码操作：

encodeURIComponent()//传入特殊字符转码，可以应用转码作为简单的加密处理
decodeURIComponent()//将转码的字符转换为正常字符

storage中只能接收字符串类型的数据，具体操作见下一节。

4.cookie有时效性可以设置有效时间，如果不设置的话在浏览器窗口关闭时就会失效；storage是永久存储。

5.cookie会与服务器通信；storage只存在客服端，不参与服务器通信。

关于cookie的网络应用可以参考这篇博客：计算机网络(HTTP)之客户识别：cookie机制

 二、Storage的应用

• localStorage：永久存储，除非手动删除
• sessionStorage：临时存储，窗口关闭就会被清除

写入与读取localStorage数据：

// 写入数据
localStorage.name = "duyi";
localStorage.obj = JSON.stringify({
    name:'dengge'
})
// 读取数据
var name =localStorage.name; 
var obj = JSON.parse(localStorage.obj);

写入后可以在控制台的Application中查看得到数据：

 

localStorage与sessionStorage的写入与读取等操作方式一致，Storage的API及属性（同时适应localStorage和sessionStorage）：

Storage.length：数据量（返回一个整数，标识存储在Storage对象中的数据项数量）；

Storage.key(index)：获取键名（该方法接收一个数值，返回对应数据的键名）；

Storage.getItem(item)：获取与键对应的值（该方法接收一个键名作为参数，返回键名对应的值）；

Storage.setItem(item,val)：添加Storage数据（该方法接受两个参数，第一个参数为数据名称，第二个为数据值）；

Storage.removeItem(item)：删除指定的数据（该方法接收一个键名，并把该键名对应的数据从存储中删除）；

Storage.clear()：清除该域下的所有Storage缓存的数据。