这三者都是浏览器用来保存用户数据的本地文件。
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 数据的生命周期 | 一般由服务器生成，可以自定义失效时间，如果由浏览器生成，则默认为浏览器关闭时失效 | 只要不删除，就会一直存在 | 仅在当前会话下，当你关闭网页或关闭浏览器时都会失效 |
| 存储的数据大小 | 一般为4KB | 至多为5MB | 至多为5MB |
| 与服务器端的通信 | 每次都会携带在HTTP头中，一般Cookie中的数据不能保存过多，否则会影响性能问题 | 仅在客户端（浏览器）中进行保存，不参与和服务器的通信 | 仅在客户端（浏览器）中进行保存，不参与和服务器的通信 |
| 易用性 | 程序员自己封装，原生的Cookie接口并不友好 | 原生的接口可以接受，但是也可以自己封装，自己封装会对Object和Array更可用 | 原生的接口可以接受，但是也可以自己封装，自己封装会对Object和Array更可用 |
| 作用域 | 与所有同源窗口均共享 | 与所有同源窗口均共享 | 不在不同的浏览器窗口共享 |
Cookie
cookie翻译过来就是小饼干的意思。它的主要用途是用来保存用户的登录信息，在我们登陆某个网站时，当我们选择记住密码那个小框框时，这通常就是在cookie中存入一段识别用户身份的数据。那么在你下一次访问这个网站时，浏览器就会向服务器发送相应的cookie，这样服务器就会知道是谁来访问了。（我们登入很多网页的时候，一进去就来个：你好！xxx 。也是这个原理。）
cookie是纯文本的信息，没有可执行代码，容量比较小，一般在4kb左右。所以cookie可以存储的数据很受限制。
有关Cookie的其他相关信息：zhuanlan.zhihu.com/p/78485005
LocalStorage
LocalStorage（本地存储）是html5中新加入的技术，可以持久化保存客户端数据的方案。LocalStorage通常用于长期登录。比如，我们每次登录掘金，只要第一次登录输入密码，那么在有效期内，我们再次进入掘金就不用每次都输入账号密码了。
LocalStorage的生命周期没有时间限制，即使在浏览器关闭后也会存在，不同于sessionStorage的临时性，只要用户不清除相关的文件LocalStorage会永久存在。所以一般只要是涉及到持久化操作的时候，都会用到LocalStorage。
与cookie不同的是，LocalStorage并不参与与服务器的通讯。而且比cookie大很多，最多可以存5MB的数据。
其他应用场景：
- 缓存静态文件内容的JS，CSS
- 缓存不常使用的API接口数据
- 存储地理位置
LocalStorage的用法可以看我的另一篇文章 juejin.cn/post/694281…
SessionStorage
Session意为“会话”，SessionStorage是一种临时的缓存数据。当我们关闭当前浏览器后SessionStorage就会被释放掉。sessionStorage是不跨窗口的，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效，而cookie和localStorage都是跨窗口的，即使浏览器的窗口关闭，这两个值还是存在。
SessionStorage可以用来统计当前页面元素的点击次数，或者 用于敏感账号的一次性登录，关闭当时页面再次打开页面时则需要重新登录。
