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

阳光穿透心脏的1/2处 2022-12-12 04:52 156阅读 0赞

导语：  
开发或者面试过程中，我们总是会看到这三个东西，cookie，localstorage，sessionstorage，那他们到底是什么呢？有有什么区别呢？别急一分钟教会你。

我们先看看对比表，然后再详细分析。

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>cookie</th> 
   <th>sessionStorage</th> 
   <th>localStorage</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>数据生命期</td> 
   <td>生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效</td> 
   <td>页面会话期间可用</td> 
   <td>除非数据被清除，否则一直存在</td> 
  </tr> 
  <tr> 
   <td>存放数据大小</td> 
   <td>4K左右（因为每次http请求都会携带cookie）</td> 
   <td>一般5M或更大</td> 
   <td>一般5M或更大</td> 
  </tr> 
  <tr> 
   <td>与服务器通信</td> 
   <td>由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题</td> 
   <td>数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td> 
   <td>数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信</td> 
  </tr> 
  <tr> 
   <td>易用性</td> 
   <td>cookie需要自己封装setCookie，getCookie</td> 
   <td>可以用源生接口，也可再次封装来对Object和Array有更好的支持</td> 
   <td>可以用源生接口，也可再次封装来对Object和Array有更好的支持</td> 
  </tr> 
  <tr> 
   <td>共同点</td> 
   <td>都是保存在浏览器端，和服务器端的session机制不同</td> 
   <td>都是保存在浏览器端，和服务器端的session机制不同</td> 
   <td>都是保存在浏览器端，和服务器端的session机制不同</td> 
  </tr> 
 </tbody> 
</table>

### 本文目录 ###

*  一，cookie
 *   *  1，cookie简介
     *  2，cookie的作用
     *  3，cookie的缺点
 *  二，sessionStorage、localStorage
 *   *  1，sessionStorage简介
     *  2，localStorage简介
     *  3，sessionStorage和localStorage特点

# 一，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始终有效，浏览器关闭也一直保存，所以可以用作持久数据。

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

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[20200902155530706.jpg_pic_center]: /images/20221123/fe1d731d85ab466eaa2d0cb1767ea404.png
[20200825125805528.png_pic_center]: /images/20221123/1f114f705a3f42559a133908817d0c7e.png
[node]: /images/20221123/4e7bef256dc2487fb7e09438fd7ee46f.png