js cookie 存储checkbox_被乱用的 Cookie

关于 Cookie 的问题，开发者多多少少都有接触过，但是大多数只有用过，并没有系统学习过。我也发现一个严重的问题，很多人在乱用 cookie，明明可以通过传参数解决的问题，却选择了使用 cookie。先说下为啥要有 cookie？

HTTP 是无状态的，也就是说没有保存状态的功能，比如想要知道当前用户处于登录状态，还是未登录状态，只能每次需要的时候向 Server 端获取。那么问题来了，网页的访问是通过 HTTP 进行的，不可能每次访问一个页面都要求用户输入账号密码吧？

所以 cookie 机制就出现了，它能够帮助记忆一些信息，使得 HTTP 变得有状态。由于浏览器现在支持存储机制，cookie 逐渐被弱化。尤其对于移动 Web 来说，cookie 用到的场景就更少了，毕竟端可以提供存储能力，直接通过 bridge 获取信息即可。我们看看 MDN 的描述：

Cookies were once used for general client-side storage. While this was legitimate when they were the only way to store data on the client, it is recommended nowadays to prefer modern storage APIs. Cookies are sent with every request, so they can worsen performance (especially for mobile data connections). 

公众号素燕注：cookie 曾经为客户端提供了存储能力，因为当时客户端只有 cookie 这种存储机制，但是现在更推荐使用存储相关的 API。cookie 会跟着每个请求一块发出去，这严重影响了性能，尤其对于手机端来说。

虽然有更优的解决方案，但是现在 cookie 仍然非常流行。

在 第 8 天：弄懂 HTTP 请求报文 这节课程中可以知道 cookie 是在请求头中设置的。下面通过两个小伙伴的对话来了解下 cookie 是如何传输的。

先请今天的主演来个自我介绍：

一天浏览器想向Server大哥获取她2019年的消费记录，然后便开始和 Server 大哥聊了起来。

公众号素燕注：通常有两种 cookie，一种是 session cookie，客户端关闭后 cookie 就会被删除；一种是 permanent cookie，即使客户端关闭，它也不会被删除，通常会设置一个过期时间，cookie过期后将不能被使用。

为了安全起见可以采取两种措施：

1. 使用 secure，表示 cookie 只给 HTTPS 的请求使用；

2.使用 httpOnly，不能通过 JS 代码获取 cookie，在网页中通常可以使用 document.cookie 来获取 cookie，设置了这个属性就不能通过JS来获取 cookie 了。

cookie 可以指定特定的范围：

有些 cookie 是给特定的域名和path使用的，这种情况要避免全局设置 cookie。不然每个请求都带上无用的 cookie，是一种对流量的浪费。通过 domain 和 path 来限定 cookie 的作用范围。

domain 来限定 host，设置主域名后，与它相关的子域名也会起作用，比如设置domain 为 baidu.com，那么 wenku.baidu.com，fanyi.baidu.com 也会起作用。

path来限定某个路径才会起作用，设置 path 后，与它相关的子 path 也会起作用。比如设置 path 为 /doc，那么 /doc/list, /doc/view 也将会起作用。

避免跨站传输 cookie：

可以使用 SameSite 这个字段避免跨站携带 cookie，它有 3 个值：

none：支持跨站和同一站点携带 cookie；

strict: 不能跨站携带 cookie；

lax: 某些可以支持跨站携带 cookie，比如获取图片。

我在群里发起了一次提问，为啥使用 cookie？(感谢这些小伙伴提供答案)：

1.cookie里面放token； 2.cookie存放服务器下发的session信息； 3.使用 cookies基本都是为了做鉴权，验证用户身份； 4.爬虫，或者自动签到； 5.cookies 里面放鉴权、自动登录；

6.cookie做sso；

欢迎打卡留言，分享你使用 cookie 的一些经历。

---

推荐阅读：

用故事说透 HTTPS

推荐一个 10.9k 的前端学习项目

第 11 天：我找到了学习 socket 的正确姿势

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies