Web 数据存储总结

随着Web应用程序的出现，也产生了对于能够在客户端上存储用户信息能力的要求。这个问题的第一个解决方案是以cookie形似出现的。网景公司在一份名为“Persistent Client State: HTTP Cookies”的标准中对cookie机制进行了阐述。

cookie限制：

1. 每个域的cookie个数是有限的，ie7之后是每个域30个，firefox是50个，chrome和safari没有限制
2. 当超过单个域名cookie限制后，还要设置cookie，浏览器就会清除前的cookie；ie和opera会删除最近最少使用过的cookie；firefox的删除并没有规律
3. 单个cookie的容量也有限制，每个至多4kb，超过4kb这个cookie会无声消失掉。

cookie的构成：

• 名称：一个唯一确定cookie的名称。cookie的名称必须是经过url编码的
• 值：存储在cookie中字符串值。值必须被url编码
• 域：cookie对于哪个域是有效的。所有向该域发送的请求都会包含这个cookie信息。这个值可以包含子域：www.wrox.com也可以不包含子域：.wrox.com
• 路径：指定对于域中的那个路径，应该向服务器发送cookie。
• 失效时间：表示cookie何时应该被删除的时间戳。默认情况下，浏览器回话结束时即将所有cookie删除；如果设置过期时间，cookie可在浏览器关闭后依然保存在用户的机器上。
• 安全标志：指定后，cookie只有在使用SSL连接的时候才能发送到服务器。

尤其注意：域、路径、失效时间和secure标志都是服务器给浏览器的指示，以指定何时应该发送cookie。这些参数并不会作为发送到服务器的cookie信息的一部分，只有名值对才会被发送。

 

document.cookie浏览器提供的用来访问和设置cookie。这个属性的特殊之处在于因为使用它的方式不同而表现出不同的行为：

• 当用来获取属性时，document.cookie返回当前页面可用的（根据域、路径、失效时间和安全设置）所有cookie的字符串，一系列由分号隔开的键值对："nam1=value1;name2=value2;name3=value3"注意最后没有分号
• 当用于设置值的时候，document.cookie属性可以设置为一个新的cookie字符串。这个cookie字符串会被解释并添加到现有的cookie集合中。除非cookie名已经存在，否则设置document.cookie并不会覆盖cookie。：document.cookie=encodeURIComponent(name) + "=" + encodeURIComponent(value) + "; domain=.wrox.com; path=/";

WebStorage

webStorage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器。Web Storage的两个主要目的：

• 提供一种在cookie之外存储会话数据的途径；
• 提供一种存储大量可以跨会话存在的数据的机制；

Storage类型

Storage类型提供最大的存储空间来存储键值对儿。Storage的实例主要常用以下方法：

• getItem(name)：根据指定的名字name获取对应的值
• removeItem(name)：删除由name指定的键值对儿
• setItem(name)：位指定的name设置一个对应值

还可以使用length属性来判断有多少键值对存放在Storage对象中。

 

localStorage对象

要访问同一个localStorage对象，页面必须来自同一个域（子域名无效），使用同一协议，在同一窗口上。

存储在localStorage中的数据保留到通过JavaScript删除或者是用户清除浏览器缓存。

storage事件

对storage对象进行任何修改，都会在文档上触发storage事件。

document.addEventListener('storage', function(evt){});

 

大多数桌面浏览器对localStorage的限制都是5MB，chrome和safari对其限制是2.5mb。