【Vue】浏览器缓存sessionStorage、localStorage、Cookie

以你之姓@ 2024-03-27 15:24 75阅读 0赞

**目录**

一、sessionStorage

1、简介

2、方法

3、代码示例

a、存取单个数据

b、存取对象

c、清除数据

二、localStorage

1、简介

2、方法

3、代码示例

三、cookie

1、简介

2、方法

3、代码示例

四、三者区别

1、sessionStorage与localStorage区别

2、sessionStorage、localStorage、cookie区别

五、往期相关优质推荐

--------------------

![c0a6c745d0bf4d44a4c46ca57b61e2e7.gif][]

## 一、sessionStorage ##

### 1、简介 ###

sessionStorage用于在浏览器会话期间存储数据，数据仅在当前会话期间有效。
    存储的数据在用户关闭浏览器标签页或窗口后会被清除。

### 2、方法 ###

*  使用sessionStorage.setItem(key, value)方法将数据存储在sessionStorage中。
 *  使用sessionStorage.getItem(key)方法根据键获取存储的值。
 *  使用sessionStorage.removeItem(key)方法根据键删除存储的值。

### 3、代码示例 ###

列表页搜索条件缓存, 使用sessionStorage实现简单的功能, 
    存储数据+读取数据+清除数据

#### a、存取单个数据 ####

sessionStorage.setItem("param", "我叫你一声你敢答应吗?");
    let param = sessionStorage.getItem("param")
    //我叫你一声你敢答应吗?
    console.log(param );

#### b、存取对象 ####

sessionStorage也可存储Json对象：
    存储时，通过JSON.stringify()将对象转换为文本格式；
    读取时，通过JSON.parse()将文本转换回对象。
    sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));
    if (sessionStorage.getItem("queryParams")) {
      this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
    }

#### c、清除数据 ####

sessionStorage.removeItem("queryParams");

## 二、localStorage ##

### 1、简介 ###

*  localStorage用于在浏览器中永久存储数据，即使用户关闭浏览器标签页或窗口，数据仍然保留。
 *  存储的数据不会自动过期，除非显式地从代码中删除或用户清除浏览器缓存。
 *  存放数据大小一般为5MB；
 *  仅在浏览器中保存，不参与服务器通信；

### 2、方法 ###

1.  使用localStorage.setItem(key, value)方法将数据存储在localStorage中。
2.  使用localStorage.getItem(key)方法根据键获取存储的值。
3.  使用localStorage.removeItem(key)方法根据键删除存储的值。

### 3、代码示例 ###

// 设置localStorage中的数据
    localStorage.setItem('key', 'value');
    // 获取localStorage中的数据
    const value = localStorage.getItem('key');
    console.log(value);  // 输出：value
    // 删除localStorage中的数据
    localStorage.removeItem('key');

## 三、cookie ##

### 1、简介 ###

*  Cookie是一种在浏览器中存储数据的机制，用于跟踪和识别用户。
 *  可以设置Cookie的过期时间，使数据在指定时间后失效。
 *  即使用户关闭浏览器，存储在Cookie中的数据也可以保留，除非设置了过期时间。

### 2、方法 ###

1.  使用document.cookie属性进行设置和获取Cookie值。
2.  使用document.cookie = "key=value; expires=expiration\_time; path=/;"语法设置Cookie。
3.  使用document.cookie获取所有Cookie值。
4.  使用document.cookie = "key=; expires=expiration\_time; path=/;"语法删除Cookie。

### 3、代码示例 ###

// 设置cookie
    document.cookie = "key=value; expires=expiration_time; path=/;";
    // 获取所有cookie
    const cookies = document.cookie;
    console.log(cookies);
    // 删除cookie
    document.cookie = "key=; expires=expiration_time; path=/;";

## 四、三者区别 ##

这些存储机制各有优劣和适用场景。
    
    sessionStorage适用于在会话期间保持数据，
    localStorage适用于需要永久存储数据的场景，
    而Cookie用于跟踪用户和设置过期时间的需求。
    
    根据具体的应用需求，选择适合的存储机制可以更好地管理和存储数据。

### 1、sessionStorage与localStorage区别 ###

*  sessionStorage在浏览器会话期间有效，而localStorage是持久的。
 *  sessionStorage在用户关闭浏览器标签页或窗口时会被清除，而localStorage会一直保留。
 *  sessionStorage和localStorage的使用方法相似，都是使用setItem、getItem和removeItem方法进行操作。

### 2、sessionStorage、localStorage、cookie区别 ###

1.  存储容量：sessionStorage和localStorage都提供了大约5MB的存储空间，而Cookie只能存储4KB的数据。
2.  生命周期：sessionStorage的数据在单个会话期间有效，关闭浏览器后数据将被清除；localStorage的数据是永久性的，除非手动清除或代码删除；Cookie可以设置过期时间，可以在指定时间之前保持有效。
3.  存储位置：sessionStorage、localStorage和Cookie数据都存储在客户端，不涉及服务器。
4.  存储机制：sessionStorage、localStorage和Cookie都使用键值对的方式存储数据。
5.  跨窗口通信：sessionStorage和localStorage不支持跨窗口通信，而Cookie支持。
6.  跨域名访问：sessionStorage和localStorage不支持跨域名访问，而Cookie支持。
7.  浏览器支持：sessionStorage和localStorage在现代浏览器中得到支持，而Cookie在所有浏览器中都可用。
8.  与服务器交互：sessionStorage、localStorage不会自动发送数据到服务器，而Cookie在每次HTTP请求中都会自动发送到服务器。

<table> 
 <thead> 
  <tr> 
   <th>特性</th> 
   <th>sessionStorage</th> 
   <th>localStorage</th> 
   <th>cookie</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>存储容量</td> 
   <td>5MB</td> 
   <td>5MB</td> 
   <td>4KB</td> 
  </tr> 
  <tr> 
   <td>生命周期</td> 
   <td>单个会话期间</td> 
   <td>永久</td> 
   <td>可设置</td> 
  </tr> 
  <tr> 
   <td>存储位置</td> 
   <td>客户端</td> 
   <td>客户端</td> 
   <td>客户端</td> 
  </tr> 
  <tr> 
   <td>存储机制</td> 
   <td>键值对</td> 
   <td>键值对</td> 
   <td>键值对</td> 
  </tr> 
  <tr> 
   <td>跨窗口通信</td> 
   <td>不支持</td> 
   <td>不支持</td> 
   <td>支持</td> 
  </tr> 
  <tr> 
   <td>跨域名访问</td> 
   <td>不支持</td> 
   <td>不支持</td> 
   <td>支持</td> 
  </tr> 
  <tr> 
   <td>浏览器支持</td> 
   <td>现代浏览器</td> 
   <td>现代浏览器</td> 
   <td>所有浏览器</td> 
  </tr> 
  <tr> 
   <td>与服务器交互</td> 
   <td>不自动发送</td> 
   <td>不自动发送</td> 
   <td>自动发送</td> 
  </tr> 
 </tbody> 
</table>

## 五、往期相关优质推荐 ##

<table> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/124309613" title="VSCode 最全实用插件（VIP典藏版）" rel="nofollow">VSCode 最全实用插件（VIP典藏版）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/103893391" title="Vue超详细整理（VIP典藏版）" rel="nofollow">Vue超详细整理（VIP典藏版）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://blog.csdn.net/libusi001/article/details/127354508" title="Vue中created，mounted，updated详解" rel="nofollow">Vue中created，mounted，updated详解</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://libusi.blog.csdn.net/article/details/127585267" title="一文快速上手Echarts（持续更新）" rel="nofollow">一文快速上手Echarts（持续更新）</a></strong></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://blog.csdn.net/libusi001/article/details/131668481" title="Vue中el-table数据项扩展各种类型总结（持续更新）" rel="nofollow">Vue中el-table数据项扩展各种类型总结（持续更新）</a></strong></td> 
  </tr> 
 </tbody> 
</table>

![97b381ff30214b6facc4c3be819a0f4c.gif][]

**有用请点赞，养成良好习惯！**

**疑问、交流、鼓励请留言！**

[c0a6c745d0bf4d44a4c46ca57b61e2e7.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/e444a8040c78470da2c1a7546825e5c4.png
[97b381ff30214b6facc4c3be819a0f4c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/62800d8d6e894af0a99da551fe5bbb26.png