cookie，localstorage，sessionstorage，一分钟让你了解它们

导语：
开发或者面试过程中，我们总是会看到这三个东西，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简介

cookie是存于用户硬盘的一个文件，这个文件通常存放在我们的C盘中，这个文件对应于一个域名，当浏览器再次访问这个域名时，这个cookie可以再次使用。

通常我们把它当成全局变量，用于存放用户在这个域名下的一些信息（登陆状态，浏览过程中留下的信息），在每次跟服务端交流的过程中，都要携带过去，用于服务端验证客户端的身份。

2，cookie的作用

1. 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多的网址都是使用这样的一种方式实现自动登录。
   不但如此，cookie还可以设置过期时间，当时间期限后，cookie就会自动删除。所以我们可以设置这个自动登录可以保存多长时间。
2. 保存用户的行为。比如，你用美团定位了一个常用城市，下次登录使用的时候，一般都会还是那个位置，这就是用cookie设置了你的常用位置，免除了你每用一次都要定位一次的麻烦。

3，cookie的缺点

1. cookie可能被用户禁用，导致网址很多功能失效。
2. cookie可能被用户删除。我们再使用电脑管家清理电脑的时候，总是会显示要不要把某个浏览器的cookie删除，一些用户就会把它删除了；
3. cookie安全性不够高。一些别有用心的用户，可能会通过脚本查看自己的cookie，从而推理出别人的，冒充别人的身份，或者在网吧查看cookie，盗取别人的账号，但是cookie对于一些敏感性的信息都可以加密储存。

二，sessionStorage、localStorage

因为两者比较相似，就一起介绍

1，sessionStorage简介

它只是在页面会话期间可用，当你的页面关闭后，这个储存就会自动删除，下次访问不能获取上次的信息。

2，localStorage简介

它除非数据被清除，否则将一直存在，所以下次访问也能够获取到上次的信息。

3，sessionStorage和localStorage特点

1. sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。这一点跟cookie不一样，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2. 它们有效期不同，sessionStorage仅在当前浏览器窗口关闭前有效，一关闭就没有了。localStorage始终有效，浏览器关闭也一直保存，所以可以用作持久数据。

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！