今天有小伙伴问我关于存取 token 和 cookie 、 sessionStorage 、 localStorage ,这是一个老生常谈的问 题了,对于一些接触前端不久或者正在捣鼓登录流程的小伙伴肯定有时候对这些玩意会懵懵的,这三个玩意儿我到底用 哪个才比较优雅啊啊啊啊啊!闹死我的中国心了,正好遇到了这个问题,今天就来聊聊这些玩意。

token

1. Token 的引入：Token 是在客户端频繁向服务端请求数据，服务端频繁的去数据库查询用户名和密码并进行对比，判断用户名和密码正确与否，并作出相应提示，在这样的背景下，Token 便应运而生。

2. Token 的定义：Token 是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个 Token 便将此 Token 返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

3. 使用 Token 的目的：Token 的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。

一般现在对于 token 的生成都是用 jwt ,这里我们不做过多的探讨。

你就记住, token 这个玩意是后端给你的,调接口的时候你要原封不动的还给后端,前端相对于 token 只是做了存储,你也可以理解为我们不生产 token ,我们只是 token 的搬运工。

cookie

Cookie 指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据，由 卢·蒙特利 于1993 年 3 月发明。

上面简单的介绍完 token ,我们来聊聊 cookie ,但是在了解 cookie 之前,你需要知道一些关于 HTTP 协议的一些小事儿。

由于 HTTP 协议是无状态的，无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。

各大浏览器对于cookie的限制

根据我自己的测试, chrome(89.0.4389.82（正式版本） （64 位）) 和 FireFox(86.0 (64 位)) 每个域最多支持 100 个 cookie

为啥不测 Safari ? 买不起
为啥不下一个 Windows 的?懒

当 cookie 超过限额时，浏览器一般会使用 LRU (缓存淘汰算法)，最近最少使用原则，删除老的 cookie 。 这你就不行了呀,万一我在哪个地方用到很久之前的cookie了呢,你给我删了我咋办...
之前有些需要兼容 IE 的需求不得不使得开发者将 cookie 的个数控制在 20 个以内,并且小于 4kb ,父子域名的问题balabala....

cookie属性

说到这里相信就会有人问了 Set-Cookie2 呢?为啥不说说这个?
因为没有被广泛实现,现在已经不推荐了。
见-RFC 6265.

可以看出来如今的 cookie 已经没有以前那么香了,使用的人数也大不如前,还有一个让开发者们最头疼的问题,那就是 cookie 的安全问题...

为什么说cookie不安全?

cookie 的信息是放在本地,很容易被获取到,且 cookie 是明文传输,很容易被抓包工具抓取...

1. Cookie 泄漏（欺骗）
   cookie 在 http 协议中是明文传输的，并且直接附在 http 报文的前面，所以只要在网络中加个嗅探工具，获取 http 包，就可以分析并获得 cookie 的值。

那有人说了,我可以改用 https 呀,我们可以加密呀

攻击者依旧可以通过社会工程学等等诱使用户主动访问在 http 协议下的服务器，从而获取明文 cookie ，因此加密后的 cookie 依旧不安全。

2. Cookie 注入\覆盖

   从本质上来讲，Cookie 注入与一般的注入（例如，传统的 SQL 注入）并无不同，两者都是针对数据库的注入，只是表现形式上略有不同。

总结cookie

cookie 会在 http 请求中携带，会在服务器和客户端间传递，所以 cookie 会有大小限制，不能超过 4k，而且存在在设定的 path 下。

其实吧,把数据放在前端,并无安全性可言,前端的数据几乎都是裸奔...

localStorage和sessionStorage

对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage

• sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载

• localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在

sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭浏览器或该标签页之后就会删除这些数据。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

不同浏览器无法共享 localStorage 或 sessionStorage 中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享 sessionStorage 的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个 iframe 标签且他们属于同源页面，那么他们之间是可以共享 sessionStorage 的。

sessionStorage存储容量

测试 Storage Size: Web Storage Support Test

三者总结

相信看到这里的你心中选谁已经有了答案了,但是在工作中我们是没有话语权的,决定用哪个的并不是我们...
参考文章:
COOKIE安全与防护
Cookie安全性分析
深入理解Session和cookie原理