第二十章：客户端存储

1 客户端存储概述  

    web应用允许使用浏览器提供的API实现将数据存储在用户电脑上。客户端存储遵循“同源策略”，因此不同站点的页面是无法读取对于存储的数据。而同一站点的不同的页面之间是可以互相共享存储数据的。

        web应用可以选择他们存储数据的有效期：有临时存储的，可以让数据保存至当前窗口关闭或浏览器退出；也有永久存储，可以将数据永久地存储在硬盘上，数年或者数月不失效。

客户端存储有以下几种形式：

web存储

        先是作为HTML5的一部分被定义成API形式，后来成为独立标准。目前包含IE8在内的主流浏览器（可交互地）都实现了。包含 localStorage 和 sessionStorage 对象， 这两个对象实际上是持久化的关联数组，是名值对的映射表 ，“名”和“值”都是字符串。web存储易于使用，支持大容量（但非无限量）数据存储同时兼容当前所有主流浏览器(但不兼容早期浏览器)。

cookie

        cookie是一种早期的客户端存储机制 ，起初是针对服务器端脚本设计使用的。尽管在客户端提供了非常繁琐的javascript API来操作cookie，但它们难用至极，而且 只适合少量的文本存储 。不仅如此，任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都要把这些数据传输到服务器端。cookie目前仍然被客户端程序员大量使用的一个重要的原因是： 所有新旧浏览器都支持它 。但是，随着Web Storage的普及，cookie将最终回归到最初的形态：作为一种被服务端脚本使用的客户存储机制。

 

IE User Data

        微软在IE5之后的IE浏览器实现了专属它的客户端存储机制--“userData”。userData可以实现一定量的字符串数据存储，对于IE8前的IE浏览器，可以将其用做是Web存储的替代方案。

离线web应用

        HTML5标准定义了一组“离线web应用”API，用于缓存web页面以及相关资源（图片，脚本，CSS文件等）。它的现实是将web应用整体存储在客户端，而不仅是存储数据。它能够让web应用“安装”在客户端。这样一来，哪怕网络不可用的时候web应用依然是可用的。

web数据库

        为了能够让开发者像使用数据那样操作大量的数据，很多主流浏览器纷纷实现在其中开始集成客户端数据库功能。Safari，Chrome，和Opera都内置了SQL数据库的客户端API。遗憾的是这类的API标准化最终以失败而告终，并且，Firefox和IE看来不打算实现这类API。目前还有一种正在标准化的API，称为“ 索引数据库API ”(Indexed Database API)。调用该API返回的是一个不包含查询语句的简单数据库对象。这两种客户端数据库API都是异步的，都使用了事件处理机制（类似 DOM事件的机制），这样的方式多多少少都显得复杂。

文件系统API

        前面介绍过现代的浏览器都支持一个文件对象，用以将选择的文件通过XMLHttpRequest上传到服务器。与之相关的规范（草案阶段）定义了一组API，用于操作一个私有的本地文件系统。该系统中，可以进行对文件的读写操作。

2 localStorage和sessionStorage

        HTML5 提供了两种在客户端存储数据的新方法：

        localStorage - 没有时间限制的数据存储，这意味着除非用户主动在浏览器 提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小 为一般为5MB，而且它仅在客户端（即浏览器）中保存，不参与和服务器的通 信。

        sessionStorage - 针对一个 session 的数据存储，仅在当前会话下有效，关 闭页面或浏览器后被清除。存放数据大小为一般为5MB，而且它仅在客户端（即 浏览器）中保存，不参与和服务器的通信。

        之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储 ，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

        localStorage和sessionStorage除了存储的有效期不同，存储的作用域也不同， localStorage的作用域是限定在文档源（document origin）级别的 ， 文档源是通过协议、主机名以及端口号三者来确定的 ，下面每个URL都有不同的文档源：

http://www.example.com          //协议：http; 主机名：www.example.com
https://www.example.com         //不同协议
http://static.example.com       //不同主机名
https://www.example.com:8000    //不同端口

        同源的文档间共享同样的localStorage数据，它们可以互相读取对方的数据，甚至可以覆盖对方的数据，非同源文档间则不能，此外，不同的浏览器间不能共享localStorage数据。

        与localStorage一样，sessionStorage的作用域也是限定在文档源中，因此，非同源文档间是无法共享sessionStorage的。不仅如此，sessionStorage的作用域还被限定在窗口中，如果同源文档渲染在不同的标签页中，那么它们互相之间拥有的是各自的sessionStorage数据，无法共享。

        对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。 HTML5 使用 JavaScript 来存储和访问数据。

        localStorage和sessionStorage使用时使用相同的API：

//以“key”为名称存储一个值“value”
localStorage.setItem("key","value");
//获取名称为“key”的值
localStorage.getItem("key");
//删除名称为“key”的信息。
localStorage.removeItem("key");
//清空localStorage中所有信息
localStorage.clear();

3 cookie

        cookie是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的， 可通过navigator.cookieEnabled查看cookie是否被起用。      

        生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个 。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。

        Cookie保存以下几方面的信息：

• Cookie的名字
• Cookie的值
• 到期时间
• 所属域名（默认是当前域名）
• 生效的路径（默认是当前网址）
• secure

document.cookie //读取当前页面的所有cookie
document.cookie = 'user=YH'; //为当前网站添加Cookie

        注：Cookie的值必须写成key=value的形式，等号两边尽量不要有空格。另外，写入Cookie的时候，必须对分号、逗号和空格进行转义（它们都不允许作为Cookie的值）， document.cookie一次只能写入一个Cookie，而且写入并不是覆盖，而是添加（相同的key是覆盖） 。如果要延长cookie的有效期，就需要设置mav-age属性来指定cookie的有效期（单位是秒）：

//将有效期设置为一天
document.cookie = 'user=TG;max-age=86400'; 

         和localStorage与sessionStorage类似， cookie的作用域是通过文档源和文档路径来确定的 。该作用域通过cookie的path和domain属性也是可配置的。默认情况下，cookie和创建它的Web页面有关，并对该Web页面以及和该Web页面同目录或者子目录的其他Web页面可见。有时候，你可能需要让整个网站都能够使用cookie的值，而不管是哪个页面创建它的，可设置cookie的path（路径）属性，当path设置为"/"时，cookie就拥有了和localStorage同样的作用域。

        

        设置cookie的domain属性可使大型网站的子域之间共享cookie ，例如，"order.example.com"  域下的服务器想读取"catalog.example.com" 域下设置的cookie值，可将" catalog.example.com" 域下cookie的path属性设置为"/"，其domain属性设置为" .example.com"，那么该域下的cookie就对 "order.example.com"、" catalog.example.com"以及任何其他example.com域下的任何其他服务器都可见。如果没有为一个cookie设置域属性，那么domain属性的默认值是当前Web服务器的主机名。注意，cookie的域只能设置为当前服务器的域。

        

        cookie还有一个secure的boolean类型属性，用来表明cookie的值以何种方式通过网络传递。cookie默认是以不安全的形式（通过普通的、不安全的HTTP连接）传递的， secure属性设置为true后只能当浏览器和服务器通过HTTPS或者其他的安全协议连接时才能传递cookie 。

        

         cookie的优点：

• 存储在客户端，不消耗浏览器资源。
• 方便快捷，可用性高。
• 只要在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。
• 控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就是一个过期的cookie。

        cookie的缺点：

• cookie的长度和数量的限制。现代浏览器允许cookie总数超过300个，但部分浏览器对单个cookie大小仍有4KB的限制。
• 安全性问题，如果cookie被人拦掉了，会被人获取相关信息。
• 有些状态不可能使用cookie保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器，若把计数器保存在客户端，则起不到什么作用。

特性	cookie	localStorage	sessionStorage
数据的生命周期	一般由服务器生成，可设置失效时间。如果在浏览器端生成 Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放的数据大小	4K左右	一般为5M
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多的数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，原生的cookie接口不友好	原生接口可以接受，也可以再次封装来对Object和Array有更好的支持

4* session

       （这部分参考文章Cookie和Session是什么？它们的区别是什么？）

        讲到cookie就不得不提一下session，session是另一种记录客户状态的机制，不同的是cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上，这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。

        每个用户访问服务器都会建立一个session，那服务器是怎么标识用户的唯一身份呢？事实上，用户与服务器建立连接的同时，服务器会自动为其分配一个SessionId。

Session和Cookie的区别：

• 数据存储位置：cookie数据存放在客户的浏览器上，session数据放在服务器上。
• 安全性：cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
• 服务器性能：session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用cookie。
• 数据大小：单个cookie保存的数据不能超过4K。
• 信息重要程度：可以考虑将登陆信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中。