浏览器端的本地存储常用的有4种

• cookie
• loacalStorage （Web HTML5 新增的本地存储机制）
• sessionStorage （Web HTML5 新增的本地存储机制）
• indexedDB

一、 cookie:

详细请看这里: 会话跟踪技术：Cookie 和Session

背景以及原理：

随着互联网的发展， 如何辨别用户身份成了一个问题。以前都是通过在url上带一些参数 或者隐藏的表单来解决这个问题。cookie作为http规范的一部分而出现，使这个问题解决有了更好的方案。

大概的工作原理就是，cookie需要服务端设置set-cookie，然后浏览器接收后，存在本地，下次发请求的时候， 浏览器会自动带上可以发送的Cookie再发回服务端，这样就实现了会话跟踪。

set-cookie 一次只能设置一个name，如果想设置多个， 就set-ccokie写多行。想重新修改cookie的值就重新赋值就行了，但是要保持所有的属性一模一样，否则会生成新的cookie。

cookie 属性：

• name ：cookie的名字，不区分大小写， 必须是url编码
• value：必须是url编码
• 有效期：在这个有效期内的cookie可以发送
  • expires（HTTP1.0 ）：是一个时间点（GMT格式），也就是cookie失效的时间
    • 设置的时间是以前的：删除cookie
  • max-age（HTTP1.1）: 代替了expires。是一个以秒为单位的时间段。也就是说失效的时间 = 创建的时间+ 秒数。
    • 0 ：删除cookie
    • -1：临时cookie，浏览器关闭就删除，默认就是临时cookie
    • 正数：只要有效期内都有效，不会自动清空
• path：只向服务端发送这个这个路径下的cookie。
• domain：cookie对于哪个域有效。
• secure: 只有在SSL的情况下（HTTPS）传输cookie。并没有加密cookie

url编码：可以使用decodeURLCompontent 进行解码，对应的是encodeURICompontent 进行编码

cookie的限制：

• 受同域限制

• cookie不同浏览器存放的数量不一样，一般是20个

  • IE6及以下：最多20个
  • FirFox + IE7以后：限制每个域最多50个
  • Opera：最多30个
  • Safari 和 Chrome： 没有硬性规定

• 不同浏览器的内容大小限制也不一样， 一般是4k

超过后浏览器会清除以前的cookie，IE和Opera会清除最近最少使用的， 但是firfox看起来像是随机清除， 所以考虑cookie的限制非常重要，以防发生不可预期的后果

服务端 set-cookie:

HTTP/1.1 200 OK
Content-type:text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com; path=/; secure;
复制代码

该头信息指定了一个叫name的cookie，会在格林威治时间 Mon, 22-Jan-07 07:10:24 GMT 失效，同时对于wrox 以及子域 p2p.wrox.com 的所有页面（path）都有效。并且只有通过SSL连接才能传输。

domian、 path、expires、secure 都是服务端给浏览器的指示， 指定何时应该发送cookie。这些参数不会作为发送到服务器cookie信息的一部分，只有name=value会被发送

js中cookie的读写：

• 读取 ： documen.cookie 。获取到的是整个域下的cookie，要通过自己封装的方法去获取单个cookie

• 设置：格式和set-cookie一样，要一模一样才能修改，否则就生成新的cookie。

• 删除：就是把有效期设置成过去时间（expires） 或者 -1 （max-age）

子cookie：

有些开发人员为了绕开cookie 的限制问题，而使用了子cookie，也就是name=name1=value1&name2=value2。
除了获取封装的方法更麻烦 其他均相同。

总结（！！！）：

cookie主要用于会话追踪技术， 他可以确认发出请求的的用户是谁。

cookie容易被盗取，所以尽量不要存储银行卡号等重要信息，而且cookie存储的信息越大，个数和内容限制因为各个浏览器的不同而不同，但是大部分是内容大小限制是4k，个数是20个。完成对服务器的时间越长，性能越差。

他需要服务端的配合，设置set-session（其中属性 path，domain，expires，secure只是对浏览器的指示，代表什么情况下发送cookie）。cookie默认下关闭浏览器即清除，可以设置有效期使cookie本地持久化。

而当服务端设置了HttpOnly 为true的时候，js不能读取cookie，可以预防xss漏洞。而修改值的时候要保持所有属性一模一样，否则会生成新的cookie。

cookie的name、value需要编码解码。

二、sessionStorage 和 localStorage

H5 的新方法，但是IE8以上浏览器都兼容。两个方法的读取和设置等方法都一样，都受到同源限制。唯一不同的就是localStorage的有效期是除非手动删除，而sessionStorage是参考了服务端的session，浏览器关闭就清除，刷新不会。

读取

• getItem(xx)
• localStorage.xx
• key（index）：获取index位置的值的名字

设置

• setItem(xx，123)
• localStorage.xx = 123

删除

• removeItem(xx)
• clear() firfox没有实现
• delet

事件：

对storage对象的修改会触发storage对象，删除和设置
该事件的event对象有以下属性：

• domain：发生变化存储空间的域名
• key：设置或者删除的键名
• newValue
• oldValue

EventUtil.addHandler(document, "storage", function(event){
    alert("Storage changed for " + event.domain);
});
复制代码

大小限制

不同浏览器厂商限制大小不一样，大多是5M，比cookie大

• localStorage
  • Chrome 和Safari：2.5M
  • ios版本的Safari 和安卓版本的 webkit ：2.5M
• sessionStorage
  • IE8+、 Opera ：5M
  • Chrome 、Safari、ios版本的Safari、安卓版本的 webkit ：2.5M

有效期

• localStorage： 除非手动删除
• sessionStorage：浏览器关闭就清除，但是刷新不影响

localStorage是globalStorage（Firfox2）的替代。

在谷歌的控制台里的application里可以看到当前域存储的sessionStorage 和 localStorage还有cookie

IndexedDB

如果数据量过大可以使用IndexedDB，替代了Web SQL（已废弃）。

• 支持搜索和查询，可以存储的数据量更大。不少于250MB
• 是异步的，每次都要注册onerror和onsuccess事件处理程序。
• 键值对存储
• 支持事务：不存在改写一部分的情况
• 同源限制：不能跨域访问数据库
• 支持二进制存储

这个方式就主要是API的学习了，可以去看 浏览器数据库 IndexedDB 入门教程

比较