随着WebApp的出现，产生了在客户端上储存用户信息的要求。下面将介绍常用的3种客户端储存方案，即cookie、localStorage、sessionStorage。通过将部分数据缓存在客户端以减少HTTP请求，可以达到性能优化的效果。

HTTP cookie，简称cookie，最初用于在客户端储存会话信息。现用于用户识别与状态管理。服务器会将一些数据临时写入客户端计算机内，当用户访问该网站时，可取回cookie

cookie有关的操作写入HTTP请求、响应头内。先是由服务器在响应阶段发送Set-Cookie给客户端。每一个cookie以name为名称，value为值，而客户端保存该cookie。响应头如下

1
2
3
4
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: status=enable; expires=Tue, 05 Jul 2011 07:26:31 GMT; path=/; domain= .hackr.jP;
Other-header: other-header-value

客户端的请求如下

1
2
3
GET /index.html HTTP/1.1
Cookie: status=enable
Other-header: other-header-value
首部字段名 说明 首部字段类型 发送者
Set-Cookie 开始状态管理所使用的Cookie信息 响应 服务器
Cookie 服务器接收到的Cookie信息 请求 客户端

cookie的构成

属性 说明
NAME=VALUE 赋予Cookie的名称和其值(必需项)
expires=DATE Cookie的有效期(若不明确指定则默认为浏览器关闭前为止)
path=PATH 将服务器上的文件目录作为Cookie的适用对象(若不指定则默认为文档所在的文件目录)
domain=域名 作为Cookie适用对象的域名(若不指定则默认为创建Cookie)的服务器域名
Secure 仅在HTTPS安全通信时才发送cookie
HttpOnly 加以限制，防止cookie被js脚本访问（防止XSS）

cookie的限制与适用范围

cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了储存在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。

由于cookie是存在客户端计算机上的，还加入了一些限制确保cookie不会被恶意使用，同时不会占
据太多磁盘空间。每个域的cookie总数是有限的。

浏览器中对于cookie的尺寸也有限制。大多数浏览器都有大约4096B(加减1)的长度限制。为了
最佳的浏览器兼容性，最好将整个cookie长度限制在4095B(含4095)以内。

由于所有的cookie都会由浏览器作为请求头发送，所以在cookie中存储大量信息会影响到特定域的请求性能。cookie信息越大，完成对服务器请求的时间也就越长。尽管浏览器对cookie进行了大小限制,不过最好还是尽可能在cookie中少存储信息，以避免影响性能。

一定不要在cookie中存储重要和敏感的数据。cookie数据并非存储在一个安全环境中，其中包含的任何数据都可以被他人访问。所以不要在cookie中存储诸如银行卡账号密码或者个人地址之类的数据。

cookie的性质和它的局限使得其并不能作为存储大量信息的理想手段，所以又出现了其他方法。

Web储存机制

在HTML5 规范中引入了sessionStorage与localStorage，旨在解决：

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

Storage类

作为含有通用方法的原型，sessionStorage与localStorage皆继承自Storage类，因此有部分通用API。

Storage类提供最大的储存空间来储存名值对

方法 说明
clear() 删除所有值
getItem(name) 根据指定键获取相应值
key(index) 获取index处的键
removeItem(name) 删除键为name的名值对
setItem(name,value) 为name设定一个对应的值

sessionStorage

sessionStorage对象储存某个特定会话的数据，且该数据保存到浏览器关闭。sessionStorage可以跨页面刷新而存在。由于其继承自Storage类，所以拥有以上表格的方法。

sessionStorage对象主要用于仅针对对话的小段数据的储存。若需要跨越会话储存数据，则需要使用到localStorage对象。

localStorage

若需要在浏览器关闭后依然能够缓存数据在客户端，则需要localStorage对象。要访问同一个localStorage对象，页面必须来自同一个域名、使用同一种协议、在同一个端口上。且像sessionStorage一样，localStorge也继承来自于Storage类的方法。

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

Web储存的限制

Web储存的限制因浏览器而异。一般来说，对于储存空间大小的限制是以每个来源（域名、协议、端口）为单位的。在使用时应当注意限制。

对于localStorage而言，大多数桌面浏览器会设置每个来源5MB的限制。Chrome和Safari 对每

个来源的限制是2.5MB。而iOS版Safari和Android 版WebKit 的限制也是2.5MB。

对sessionstorage的限制也是因浏览器而异。有的浏览器对sessionStorage的大小没有限制，

但Chrome、Safari、iOS版Safari和Android 版WebKit都有限制，也都是2.5MB。