cookie

最初用于在客户端存储会话信息。这个规范要求服务器在响应HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。例如，下面是包含这个头部的一个 HTTP
响应头：

HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value 
Other-header: other-header-value

这个 HTTP 响应会设置一个名为"name"，值为"value"的 cookie。名和值在发送时都会经过 URL编码。浏览器会存储这些会话信息，并在之后的每个请求中都会通过 HTTP 头部 cookie 再将它们发回服
务器，比如：
(应该是放在了请求头里

GET /index.jsl HTTP/1.1 
Cookie: name=value 
Other-header: other-header-value

这些发送回服务器的额外信息可用于唯一标识发送请求的客户端。

限制

cookie 是与特定域绑定的。设置 cookie 后，它会与请求一起发送到创建它的域。这个限制能保证cookie 中存储的信息只对被认可的接收者开放，不被其他域访问。
因为cookie 存储在客户端机器上，所以为保证它不会被恶意利用，浏览器会施加限制。同时，cookie也不会占用太多磁盘空间。
遵守以下大致的限制，就不会在任何浏览器中碰到问题
一般情况下来说：

不超过 300 个 cookie；
每个 cookie 不超过 4096 字节；
每个域不超过 20 个 cookie；
每个域不超过 81 920 字节。（1024字节是1kb,1024KB=1MB）

每个域能设置的 cookie 总数也是受限的，但不同浏览器的限制不同。例如：

最新版 IE 和 Edge 限制每个域不超过 50 个 cookie；
最新版 Firefox 限制每个域不超过 150 个 cookie；
最新版 Opera 限制每个域不超过 180 个 cookie；
Safari 和 Chrome 对每个域的 cookie 数没有硬性限制

如果 cookie 总数超过了单个域的上限，浏览器就会删除之前设置的 cookie。IE 和 Opera 会按照最近最少使用（LRU，Least Recently Used）原则删除之前的 cookie，以便为新设置的 cookie 腾出空间。Firefox好像会随机删除之前的 cookie，因此为避免不确定的结果，最好不要超出限制。
如果创建的 cookie 超过最大限制，则该 cookie 会被静默删除。注意，一个字符通常会占 1 字节。如果使用多字节字符（如 UTF-8 Unicode 字符），则每个字符最多可能占 4 字节。

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 
Other-header: other-header-value

名称：唯一标识 cookie 的名称。cookie 名不区分大小写，因此 myCookie 和 MyCookie 是同一个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，因为一些服务器软件可能这样对待它们。cookie 名必须经过 URL 编码。
值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
域：cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。这个值可能包含子域（如www.wrox.com），也可以不包含（如.wrox.com 表示对 wrox.com 的所有子域都有效）。如果不明确设置，则默认为设置 cookie 的域。
路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，可以指定 cookie 只能由http://www.wrox.com/books/访问，因此访问 http://www.wrox.com/下的页面就不会发送 cookie，即使请求的是同一个域。
过期时间：表示何时删除 cookie 的时间戳（即什么时间之后就不发送到服务器了）。
默认情况下，浏览器会话结束后会删除所有 cookie。不过，也可以设置删除 cookie 的时间。这个值是 GMT 格式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。
这样即使关闭浏览器 cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除 cookie。
安全标志：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。例如，请求 https://www.wrox.com 会发送 cookie，而请求 http://www.wrox.com 则不会。
比如Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
这个头部设置一个名为"name"的 cookie，这个 cookie 在 2007 年 1 月 22 日 7:10:24 过期，对www.wrox.com 及其他 wrox.com 的子域（如 p2p.wrox.com）有效。

安全标志 secure 是 cookie 中唯一的非名/值对，只需一个 secure 就可以了。比如：

HTTP/1.1 200 OK 
Content-type: text/html 
Set-Cookie: name=value; domain=.wrox.com; path=/; secure 
Other-header: other-header-value

这里创建的 cookie 对所有 wrox.com 的子域及该域中的所有页面有效（通过 path=/指定）。不过，这个 cookie 只能在 SSL 连接上发送，因为设置了 secure 标志。
要知道，域、路径、过期时间和 secure 标志用于告诉浏览器!!什么情况下应该在请求中包含 cookie。这些参数并不会随请求发送给服务器，实际发送的只有 cookie 的名/值对。

注意事项：

HTTP-only 可以在浏览器设置，也可以在服务器设置，但只能在服务器上读取，这是因为 JavaScript 无法取得这种 cookie 的值。因为所有 cookie 都会作为请求头部由浏览器发送给服务器，所以在 cookie 中保存大量信息可能会影响特定域浏览器请求的性能。保存的 cookie 越大，请求完成的时间就越长。即使浏览器对 cookie 大小有限制，最好还是尽可能只通过 cookie 保存必要信息，以避免性能问题。对 cookie 的限制及其特性决定了 cookie 并不是存储大量数据的理想方式。因此，其他客户端存储技术出现了。

不要在 cookie 中存储重要或敏感的信息。cookie 数据不是保存在安全的环境中，因
此任何人都可能获得。应该避免把信用卡号或个人地址等信息保存在 cookie 中。

Web Storage

提供在 cookie 之外的存储会话数据的途径；
提供跨会话持久化存储大量数据的机制。
Web Storage 的第 2 版定义了两个对象：localStorage 和 sessionStorage。
localStorage 是永久存储机制，
sessionStorage 是跨会话的存储机制。
这两种浏览器存储 API 提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

sessionStorage 对象

sessionStorage 对象只存储会话数据，这意味着数据只会存储到浏览器关闭。这跟浏览器关闭时会消失的会话 cookie 类似。存储在 sessionStorage 中的数据不受页面刷新影响，可以在浏览器崩溃并重启后恢复。（取决于浏览器，Firefox 和 WebKit 支持，IE 不支持。）

因为 sessionStorage 对象与服务器会话紧密相关，所以在运行本地文件时不能使用。
存储在
sessionStorage 对象中的数据只能由最初存储数据的页面使用，在多页应用程序中的用处有限。因为 sessionStorage 对象是 Storage 的实例，所以可以通过使用 setItem()方法或直接给属性赋值给它添加数据。下面是使用这两种方式的例子：

// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas"); 
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";
// 使用方法取得数据
let name = sessionStorage.getItem("name"); 
// 使用属性取得数据
let book = sessionStorage.book;

localStorage 对象

作为在客户端持久存储数据的机制。要访问同一个 localStorage 对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。
因为 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样使用
localStorage。比如下面这几个例子：

// 使用方法存储数据
localStorage.setItem("name", "Nicholas"); 
// 使用属性存储数据
localStorage.book = "Professional JavaScript"; 
// 使用方法取得数据
let name = localStorage.getItem("name"); 
// 使用属性取得数据
let book = localStorage.book;

localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览
器而丢失。

限制

具体的限制取决于特定的浏览器。一般来说，客户端数据的大小限制是按照每个源（协议、域和端口）来设置的，因此每个源有固定大小的数据存储空间。分析存储数据的页面的源可以加强这一限制。不同浏览器给 localStorage 和 sessionStorage 设置了不同的空间限制，但大多数会限制为每个源 5MB。

总结一下

区别：
1、cookie在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会自动把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。
2.cookie每个域存80kb左右，1024kb=1M,而其他两个限制为每个源 5MB
3.cookie可以设置过期日期，不设置的话也是会话级数据，sessionStorage是会话级的数据，浏览器窗口关闭即清楚，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。
4.使用场景：
localStorage可以用来统计页面被访问次数。
sessionStorage可以用来统计当前页面元素的点击次数。
cookie一般存储用户名相关信息，可以用在前端路由鉴定权限吧？
Cookie 的作用

Cookie 主要用于以下三个方面：

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

【12月6日】本地存储