localStorage、sessionStorage、Cookie的区别及用法

用一张表格形象简单说明：

web存储简介.png

说明：
1：关于cookie存在的跨域问题
当浏览器向后台发起请求时，如果是跨域请求，那么就不会发送cookie给后台，而cookie中有一些信息，例如JsessionID等身份信息就不能发送给后台，这样会导致服务器认为你没有登录。
2：cookie是如何工作的

1. 首先，我们假设当前域名下还是没有 Cookie 的
2. 接下来，浏览器发送了一个请求给服务器（这个请求是还没带上 Cookie 的）
3. 服务器设置 Cookie 并发送给浏览器（当然也可以不设置）
4. 浏览器将 Cookie 保存下来
5. 接下来，以后的每一次请求，都会带上这些 Cookie，发送给服务器
ps:
Cookie 虽然是存储在浏览器，但是通常由服务器端进行设置，当然客户端也可以设置

image.png

Cookie 的属性选项

每个 Cookie 都有一定的属性，如什么时候失效，要发送到哪个域名，哪个路径等等。在设置任一个 Cookie 时都可以设置相关的这些属性，当然也可以不设置，这时会使用这些属性的默认值。

expires

expires 选项用来设置 Cookie 什么时间内有效，expires 其实是 Cookie 失效日期。
expires 必须是 GMT 格式的时间（可以通过 new Date().toGMTString() 或者 new Date().toUTCString() 来获得）,所以，Cookie 的失效时刻到了之后，通过 document.cookie 就访问不到这个 Cookie 了，当然以后发送请求也不会再带上这个失效的 Cookie 了。

domain 和 path

name、domain 和 path 可以标识一个唯一的 Cookie。domain 和 path 两个选项共同决定了 Cookie 何时被浏览器自动添加到请求头部中发送出去。具体是什么原理请看 Cookie 的作用域和作用路径 这个章节。

如果没有设置这两个选项，则会使用默认值。domain 的默认值为设置该 Cookie 的网页所在的域名，path 默认值为设置该 Cookie 的网页所在的目录。

secure

secure 选项用来设置 Cookie 只在确保安全的请求中才会发送。当请求是 HTTPS 或者其他安全协议时，包含 secure 选项的 Cookie 才能被保存到浏览器或者发送至服务器。

默认情况下，Cookie 不会带 secure 选项(即为空)。所以默认情况下，不管是 HTTPS 协议还是 HTTP 协议的请求，Cookie 都会被发送至服务端。

httpOnly

这个选项用来设置 Cookie 是否能通过 js 去访问。默认情况下，Cookie 不会带 httpOnly 选项(即为空)，客户端是可以通过 js 代码去访问（包括读取、修改、删除等）这个 Cookie 的。当 Cookie 带 httpOnly 选项时，客户端则无法通过 js 代码去访问（包括读取、修改、删除等）这个 Cookie。

设置 Cookie

明确一点：Cookie 可以由服务端设置，也可以由客户端设置。

服务端设置 Cookie

看回刚刚的那张图，我们设置了很多个 Cookie。

image.png

• 一个 Set-Cookie 字段只能设置一个 Cookie，当你要想设置多个 Cookie，需要添加同样多的 Set-Cookie 字段

• 服务端可以设置 Cookie 的所有选项：expires、domain、path、secure、HttpOnly

客户端设置 Cookie

在网页即客户端中我们也可以通过 js 代码来设置 Cookie。

设置

document.cookie = 'name=value'

可以设置 Cookie 的下列选项：expires、domain、path，各个键值对之间都要用 ; 和 空格 隔开

document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';

secure

只有在 https 协议的网页中，客户端设置 secure 类型的 Cookie 才能成功

HttpOnly

客户端中无法设置 HttpOnly 选项

删除 Cookie

Cookie 的 name、path 和 domain 是唯一标识一个 Cookie 的。我们只要将一个 Cookie 的 max-age 设置为 0，就可以删除一个 Cookie 了。

let removeCookie = (name, path, domain) => {  document.cookie = `${name}=; path=${path}; domain=${domain}; max-age=0`}

Cookie 的作用域和作用路径

作用域
在说这个作用域之前，我们先来对域名做一个简单的了解。

子域，是相对父域来说的，指域名中的每一个段。各子域之间用小数点分隔开。放在域名最后的子域称为最高级子域，或称为一级域，在它前面的子域称为二级域。

以下图为例，news.163.com 和 sports.163.com 是子域，163.com 是父域。

image.png

当 Cookie 的 domain 为 news.163.com，那么访问 news.163.com 的时候就会带上 Cookie；
当 Cookie 的 domain 为 163.com，那么访问 news.163.com 和 sports.163.com 就会带上 Cookie

作用路径
当 Cookie 的 domain 是相同的情况下，也有是否带上 Cookie 也有一定的规则。

image.png

在子路径内可以访问访问到父路径的 Cookie，反过来就不行。

参考文章：
Cookie 在前端中的实践

作者：麦壳儿UIandFE2
链接：https://www.jianshu.com/p/cf9f5a3deb85