导语：
开发或者面试过程中，我们总是会看到这三个东西，cookie，localstorage，sessionstorage，那他们到底是什么呢？有有什么区别呢？别急一分钟教会你。
我们先看看对比表，然后再详细分析。
| 特性 | cookie | sessionStorage | localStorage |
|---|---|---|---|
| 数据生命期 | 生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效 | 页面会话期间可用 | 除非数据被清除，否则一直存在 |
| 存放数据大小 | 4K左右（因为每次http请求都会携带cookie） | 一般5M或更大 | 一般5M或更大 |
| 与服务器通信 | 由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 | 数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信 | 数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信 |
| 易用性 | cookie需要自己封装setCookie，getCookie | 可以用源生接口，也可再次封装来对Object和Array有更好的支持 | 可以用源生接口，也可再次封装来对Object和Array有更好的支持 |
| 共同点 | 都是保存在浏览器端，和服务器端的session机制不同 | 都是保存在浏览器端，和服务器端的session机制不同 | 都是保存在浏览器端，和服务器端的session机制不同 |
本文目录
- 一，cookie
-
- 1，cookie简介
- 2，cookie的作用
- 3，cookie的缺点
- 二，sessionStorage、localStorage
-
- 1，sessionStorage简介
- 2，localStorage简介
- 3，sessionStorage和localStorage特点
一，cookie
1，cookie简介
cookie是存于用户硬盘的一个文件，这个文件通常存放在我们的C盘中，这个文件对应于一个域名，当浏览器再次访问这个域名时，这个cookie可以再次使用。
通常我们把它当成全局变量，用于存放用户在这个域名下的一些信息（登陆状态，浏览过程中留下的信息），在每次跟服务端交流的过程中，都要携带过去，用于服务端验证客户端的身份。
2，cookie的作用
- 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多的网址都是使用这样的一种方式实现自动登录。
不但如此，cookie还可以设置过期时间，当时间期限后，cookie就会自动删除。所以我们可以设置这个自动登录可以保存多长时间。 - 保存用户的行为。比如，你用美团定位了一个常用城市，下次登录使用的时候，一般都会还是那个位置，这就是用cookie设置了你的常用位置，免除了你每用一次都要定位一次的麻烦。
3，cookie的缺点
- cookie可能被用户禁用，导致网址很多功能失效。
- cookie可能被用户删除。我们再使用电脑管家清理电脑的时候，总是会显示要不要把某个浏览器的cookie删除，一些用户就会把它删除了；
- cookie安全性不够高。一些别有用心的用户，可能会通过脚本查看自己的cookie，从而推理出别人的，冒充别人的身份，或者在网吧查看cookie，盗取别人的账号，但是cookie对于一些敏感性的信息都可以加密储存。
二，sessionStorage、localStorage
因为两者比较相似，就一起介绍
1，sessionStorage简介
它只是在页面会话期间可用，当你的页面关闭后，这个储存就会自动删除，下次访问不能获取上次的信息。
2，localStorage简介
它除非数据被清除，否则将一直存在，所以下次访问也能够获取到上次的信息。
3，sessionStorage和localStorage特点
- sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。这一点跟cookie不一样，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
- 它们有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，一关闭就没有了。localStorage始终有效，浏览器关闭也一直保存，所以可以用作持久数据。
补充：
微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！
