Cookie
Cookie 是 HTTP 协议的一种无状态协议。当请求服务器时，HTTP 请求都需要携带 Cookie，用来验证用户身份。Cookie 由服务端生成，存储在客户端，用来维持状态。
通常 Cookie 由以下值构成：
名称（name） 值（value） 域（Domain） 值（value） 路径（Path） 失效时间（Expiers/Max-Age） 大小（Size） 是否为 HTTP 请求（HttpOnly） 安全性（Secure） 提示：域、路径、失效时间和安全性都是服务器给浏览器的指示，它们不会随着请求发送给服务器，发送给服务器的只有名称与值对。Cookie 有一些限制，它可以设置有过期时间，但是如果没有设置，则会和 session 一个级别，一旦关闭浏览器就会消失。
Cookie 拥有以下优点：
可以控制过期时间，不会永久有效，有一定的安全保障。
可进行扩展，可跨域共享。
通过加密与安全传输技术 （SSL），可以减少 Cookie 被破解的可能性。
有较高的兼容性。
缺点则如下：
有一定的数量与长度限制，每个 Cookie 长度不能超过 4KB ，否则超出部分会被截掉。
请求头上的数据容易被拦截攻击。
单个 Cookie 大小不超过 4KB，很多浏览器都限制一个站点最多保存 20 个 Cookie。
web Storage
H5 可以在本地存储用户的浏览数据，以前用 Cookie，但是 web Storage 更快速、安全。可以存储大量的数据，而不影响网站性能，以键/值对存在。
web Storage 分为两种：sessionStorage 和 localStorage。
sessionStorage
sessionStorage 将数据存储在 session 中，当浏览器关闭就会消失。它具有以下特色：
- 大小 5Mb - 页面刷新数据不会消失，页面关闭就消失。 - 不可以跨页面（仅在当前页面使用）。 - 使用 window.open 打开页面和改变 location.href 方式可以获取到 sessionStorage 内部的数据。主要被应用在下面这些场景中：
主要针对会话级的小数据的存储。
存储一些在当前页面刷新仍然需要存储，但是关闭后不需要留下的信息。
很适合单页应用的使用，可以用来存储登录态信息等。
localStorage
localStorage 会把数据一直存在客户端本地。其 API 提供了如下的方法进行操作：
setItem (key，value) —— 保存数据，以键值对的方式存储。
getItem (key) —— 读取数据，传入键值（key），获得对应的值（value）。
removeItem (key) —— 删除某个数据，删除键值对。
clear () —— 删除所有数据。
key (index) —— 获取某个索引的key。
下面是 localStora 的特性：
- 大小 5Mb。 - 可以跨页面。 - 永久存储，需要手动删除。 - 使用 window.open 打开页面和改变 location.href 方式可以获取到 sessionStorage 内部的数据。它通常都被运用在下列场景中：
持久性的保存客户端数据，只能通过 JavaScript 删除或者用户清除浏览器缓存。
如果有一些稍大量的数据，例如编辑器的自动保存等。
多页面间访问共同数据。sessionStorage 只能用于一个标签页，而localStorage可以在多个标签页之间共享。
浏览器缓存机制浏览器的缓存机制是将已访问过的资源进行缓存，这样当客户端下次访问时，就能直接访问已经缓存的资源，从而减少服务器请求次数，让页面能够更快地加载。
而判断是否访问缓存则是依靠 HTTP 的各种 Header，比如下面的这几种：
Expires：响应头，表示该资源的过期时间。
Cache-Control：请求头/响应头，是缓存控制字段。
Etag (HTTP1.1)：响应头，是资源标识，服务器存储。一旦资源被修改，Etag 就会随之发生变化。
lf-None-Match (HTTP1.1)：请求头，一般服务器会将 If-None-Match 与被请求资源的最新 ETag 进行比对。
Last-Modified (HTTP1.0)：响应头，表示资源最后一次修改的时间。
If-Modified-Since (HTTP1.0)：请求头，资源最后一次修改时间(后面详情）。
这些 Header 共同组成了 HTTP 的请求和响应，也支撑着浏览器缓存，但是这种缓存方式是有缺陷的。
首先，如果资源更新的速度是秒以下单位，那么这个缓存是不能被使用的。因为它的时间单位最低是秒。