前端开发本地存储之cookie

1、cookie

cookie是纯文本，没有可执行代码，是指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端（浏览器）上的数据（通常经过加密）。当用户访问了某个网站的时候，我们就可以通过cookie在访问者电脑上存储数据，或者某些网站为了辨别用户身份、进行session 跟踪而将数据储存在用户本地终端上（通常经过加密）。

cookie 默认是临时存储的，当浏览器关闭进程的时候自动销毁。要想长时间保存一个cookie，就需要设置cookie的过期时间。当 Web 服务器创建了Cookies 后，只要在其有效期内，用户访问同一个 Web 服务器时，浏览器首先要检查本地的Cookies，并将其原样发送给 Web 服务器。cookie是能保持 Web 浏览状态的手段。

2、cookie的工作过程

当网页要发 http 请求时，浏览器会先检查是否有相应的 cookie，有则自动添加在request header中的cookie字段中。这些是浏览器自动帮我们做的，而且每一次http请求浏览器都会自动帮我们做。

存储在cookie中的数据，每次都会被浏览器自动放在http请求中。如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销。但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那种设置“每次请求都要携带的信息（最典型的就是身份认证信息）”就特别适合放在cookie中，其他类型的数据就不适合了。

工作过程：

（1）首先，我们假设当前域名下还是没有 Cookie 的

（2）接下来，浏览器发送了一个请求给服务器(这个请求是还没带上 Cookie 的)

（3）服务器设置 Cookie 并发送给浏览器(当然也可以不设置)

（4）浏览器将 Cookie 保存下来

（5）接下来，以后的每一次请求，都会带上这些 Cookie，发送给服务器

3、cookie的特征

（1）不同的浏览器存放的cookie位置不一样，也是不能通用的。

（2）cookie的存储是以域名形式进行区分的，在同一浏览器下不同的域名下存储的cookie是独立的。

（3）cookie也可以设置过期的时间，默认是会话结束的时候，当时间到期自动销毁

（4）一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个

（5）我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域

（6）cookie 必须在 HTML 文件的内容输出之前设置。如果用户在浏览器上设置了禁止 Cookie，则 Cookie 不能建立。

4、cookie的设置

4.1、在客户端设置

document.cookie = '名字=值';
document.cookie = 'username=cfangxu;domain=baike.baidu.com'    //并且设置了生效域

注意： 客户端可以设置cookie 的下列选项：expires、domain、path、secure（有条件：只有在https协议的网页中，客户端设置secure类型的 cookie 才能成功），但无法设置HttpOnly选项。

4.2、在服务器端设置

不管你是请求一个资源文件（如 html/js/css/图片），还是发送一个ajax请求，服务端都会返回response。而response header中有一项叫set-cookie，是服务端专门用来设置cookie的。

//Set-Cookie 消息头是一个字符串，其格式如下（中括号中的部分是可选的）：
Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

注意： 一个set-Cookie字段只能设置一个cookie，当你要想设置多个 cookie，需要添加同样多的set-Cookie字段。 
服务端可以设置cookie 的所有选项：expires、domain、path、secure、HttpOnly。通过 Set-Cookie 指定的这些可选项只会在浏览器端使用，而不会被发送至服务器端。

5、cookie的域概念（domain）

domain 指定了 cookie 将要被发送至哪个或哪些域中。默认情况下，domain 会被设置为创建该 cookie 的页面所在的域名，所以当给相同域名发送请求时该 cookie 会被发送至服务器。浏览器会把 domain 的值与请求的域名做一个尾部比较（即从字符串的尾部开始比较），并将 domain 能匹配到域名的 cookie 发送至服务器。

（1）客户端设置

document.cookie = "username=cfangxu;path=/;domain=qq.com" 

上面将 domain 设置为 qq.com，表示访问域名尾部是 qq.com 的网站时浏览器都会将该 cookie 带上。path 值为 "/" 表示访问 qq.com 域名下的根目录下的都将能带上该 cookie

（2）服务端设置

Set-Cookie: username=cfangxu;path=/;domain=qq.com
// 注：一定的是同域之间的访问，不能把domain的值设置成非主域的域名。

6、cookie的路径概念

因为安全方面的考虑，默认情况下，只有与创建 cookie 的页面在同一个目录或子目录下的网页才可以访问。但 path 属性可以为 cookie 指定路径，domain 和 path 加起来构成了URL，表示当浏览器在访问该 URL 下的网站或者 URL 带有这个前缀的网站时都将会带上该 cookie 。

（1）客户端设置

最常用的例子就是让 cookie 在根目录下,这样不管是哪个子页面创建的 cookie，该域名下的所有页面都可以访问到了。

document.cookie = "username=cfangxu; path=/"

（2）服务器端设置

Set-Cookie:name=cfangxu; path=/blog

如上设置：path 选项值会与 /blog，/blogrool 等等相匹配；任何以 /blog 开头的选项都是合法的。需要注意的是，只有在 domain 选项核实完毕之后才会对 path 属性进行比较。path 属性的默认值是发送 Set-Cookie 消息头所对应的 URL 中的 path 部分。

domain和path总结：

domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问。 所以domain和path两个选项共同决定了cookie何时被浏览器自动添加到请求头部中发送出去。如果没有设置这两个选项，则会使用默认值。domain的默认值为设置该cookie的网页所在的域名，path默认值为设置该cookie的网页所在的目录。

7、JavaScript操作cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

7,1、创建cookie

document.cookie="username=John Doe";

添加过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

添加浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

7.2、读取cookie

通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下所有的cookie，这个方法只能获取非 HttpOnly 类型的cookie。它会把所有的cookie通过一个分号+空格的形式串联起来，例如：username=chenfangxu; job=coding

var x = document.cookie;

7.3、修改 cookie

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie。

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

7.4、删除 cookie

把要删除的cookie的过期时间设置成已过去的时间,path/domain/这几个选项一定要旧cookie 保持一样。

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