Web 缓存 - Cookie

Cookie 是什么

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，会在浏览器下一次向同一服务器在发起请求时被携带并发送到服务器上。

通常，Cookie 用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。Cookie 技术产生源于 HTTP 协议在互联网上的急速发展。

Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段。 但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐被淘汰。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销。

Cookie 的存储

Cookie 保存在客户端某个特定的目录下的一个扩展名为 “ .txt ” 文本文件中，并且不同站点的 Cookie 数据保存不同的文件中

Cookie 数据一般都是加密后保存的。

Cookie 的作用域

Domain 和 Path 标识定义了 Cookie 的作用域，即 Cookie 应该发送给哪些 URL。

• Domain 标识指定了哪些主机可以接受 Cookie。
  • 如果不指定，默认为当前文档的主机（不包含子域名）。
  • 如果指定了 Domain，则一般包含子域名。例如,如果设置 Domain=wzy.com，则 Cookie 也包含在子域名中（如 developer.wzy.com）。
• Path 标识指定了主机下的哪些路径可以接受 Cookie（该URL路径必须存在于请求URL中）。以字符 %x2F(“/”) 作为路径分隔符，子路径也会被匹配

Cookie 的有效期

Max-Age 和 Expires 标识定义了 Cookie 的有效期，即 Cookie 的生命周期。

• 会话期 Cookie

会话期 Cookie 是最简单的 Cookie。浏览器关闭之后 Cookie 会被自动删除，也就是说 Cookie仅在会话期内有效。会话期 Cookie 不需要指定过期时间（Expires）或者有效期（Max-Age）。

• 持久性 Cookie

持久性 Cookie 可以指定一个特定的过期时间（Expires）或有效期（Max-Age）

Cookie 的应用

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

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

访问与更新 Cookie

1. 创建 Cookie

JavaScript 可以使用 document.cookie 属性来访问和更新 Cookie。语法结构如下所示：

document.cookie = newCookie;

newCookie 是一个键值对形式的字符串。需要注意的是，用这个方法一次只能对一个 cookie 进行设置或更新。

document.cookie = "name = change";
document.cookie = "someCookieName = true; expires = Fn,31 Dec 9999 23:59:59 GMT;path=/";

2. 读取 Cookie

JavaScript 可以使用 document.cookie 属性来访问和更新 Cookie。语法结构如下所示：

allCookie = document.cookie;

allCookies 被赋值为一个字符串，该字符串包含所有的 Cookie，每条 cookie 以分号分隔（即 key = value 键值对）。

var cookies = document.cookie;
console.log(cookies);
var arr = cookies.split(';');
for(var i=0;i<arr.length;i++){
    var cookies = arr[i]; 
    var cookiePair = cookie.split('=');
    console.log(cookiePair[0]+'='+cookiePair[i]);
}

3. 修改 Cookie

JavaScript 更新 Cookie 类似于创建 Cookie。语法结构如下所示：

document.cookie = new Cookie;

newCookie 是一个键值对形式的字符串。需要注意的是，用这个方法一次只能对一个 cookie 进行设置或更新。

4. 删除 Cookie （删除时不必指定 Cookie 值）

JavaScript 删除 Cookie 只需要设置 Expires 标识为以前的时间即可。如下所示：

document.cookie = "username=;expires=Thu,01,Jan 1970 00:00:00 GMT"

HTTP 中的 Cookie

Set-Cookie 响应头

服务器使用 Set-Cookie 响应头部向用户代理（一般是浏览器）发送 Cookie 信息。一个简单的Cookie可能像这样：

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

服务器通过该头部告知客户端保存 Cookie 信息。

HTTP/1.0 200 OK
Content-type:text/html
Set-Cookie:yummy_cookie=choco
Set-Cookie:tasty_cookie=strawberry
[页面内容]

Cookie 请求头

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

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