cookie,sessionStorage,localStorage

1. cookie

1.1 简介

cookie即HTTP cookie，是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。
Cookie主要用于以下三个方面：

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

当服务器收到HTTP请求时，服务器可以在响应头里面添加一个Set-Cookie选项。浏览器收到响应后通常会保存下Cookie，之后对该服务器每一次请求中都通过Cookie请求头部将Cookie信息发送给服务器。另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

服务器通过在响应头部使用Set-Cookie向用户代理（一般是浏览器）发送Cookie信息

1

Set-Cookie: <cookie名>=<cookie值>

如一个响应头部可能如下:

1
2
3
4
5
6

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[页面内容]

之后，浏览器对该服务器发起的每一次新请求都会将之前保存的Cookie信息通过Cookie请求头部再发送给服务器，如

1
2
3

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

1.2 cookie的限制

cookie 在性质上是绑定在特定的域名下的。当设定了一个 cookie 后，再给创建它的域名发送请求时， 6 都会包含这个 cookie。这个限制确保了储存在 cookie 中的信息只能让批准的接受者访问，而无法被其他域访问
由于 cookie 是存在客户端计算机上的，还加入了一些限制确保 cookie 不会被恶意使用，同时不会占 据太多磁盘空间。每个域的 cookie 总数是有限的，不过浏览器之间各有不同：

• Firefox 和IE7 和之后版本限制每个域最多 50 个 cookie
• Opera 限制每个域最多 30 个 cookie
• Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定
  当超过单个域名限制之后还要再设置 cookie，浏览器就会清除以前设置的 cookie。浏览器中对于 cookie 的尺寸也有限制。大多数浏览器都有大约 4096B(加减 1)的长度限制。为了 最佳的浏览器兼容性，最好将整个 cookie 长度限制在 4095B(含 4095)以内。如果你尝试创建超过最大尺寸限制的 cookie，那么该 cookie 会被悄无声息地丢掉

1.3 cookie的构成

• 名称：一个唯一确定 cookie 的名称
• 值：储存在 cookie 中的字符串值
• 域（Domain）：cookie 对于哪个域是有效的，即Cookie应该发送给哪些URL。所有向该域发送的请求中都会包含这个 cookie 信息。这个值可以包含子域(subdomain，如 www.wrox.com)，也可以不包含它(如.wrox.com，则对于 wrox.com的所有子域都有效)。如果没有明确设定，那么这个域会被认作来自设置 cookie 的那个域（不包含子域名）。
• 路径（Path）：Path 标识指定了主机下的哪些路径可以接受Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F (“/“) 作为路径分隔符，子路径也会被匹配。例如，设置 Path=/docs，则以下地址都会匹配：
  • /docs
  • /docs/Web/
  • /docs/Web/HTTP
• 失效时间：指定过期时间（Expires）或者有效期（Max-Age）确定cookie的有效期，其将在此时间过后被删除(只与用户代理的时间有关，与服务器时间无关)
• 安全标志：标记为 Secure 的Cookie只应通过被HTTPS协议加密过的请求发送给服务端
  为避免跨域脚本 (XSS) 攻击，通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端

例如：

1
2
3
4

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Nov-18 07:10:24 GMT; domain=.wrox.com ;secure;HttpOnly
Other-header: other-header-value

该头信息指定了一个叫做 name 的 cookie，它会在标准时间 2018 年 11 月 22 日 7:10:24 失效，同 时对于 www.wrox.com 和 wrox.com 的任何子域(如 p2p.wrox.com)都有效，并且只能通过HTTPS协议发送给服务器端，其只不能通过document.cookie访问

2.sessionStorage和localStorage

二者的概念和用法都相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。用法如下：

1
2
3
4
5
6
7
8
9
10
11

// 保存数据到sessionStorage
sessionStorage.setItem('key', 'value');

// 从sessionStorage获取数据,注意其得到的值为字符串类型
var data = sessionStorage.getItem('key');

// 从sessionStorage删除保存的数据
sessionStorage.removeItem('key');

// 从sessionStorage删除所有保存的数据
sessionStorage.clear();

1
2
3
4
5
6
7
8
9
10
11

// 保存数据到localStorage
localStorage.setItem('key', 'value');

// 从localStorage获取数据,注意其得到的值为字符串类型
var data = localStorage.getItem('key');

// 从localStorage删除保存的数据
localStorage.removeItem('key');

// 从localStorage删除所有保存的数据
localStorage.clear();