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

目录

一、sessionStorage

1、简介

2、方法

3、代码示例

a、存取单个数据

b、存取对象

c、清除数据

二、localStorage

1、简介

2、方法

3、代码示例

三、cookie

1、简介

2、方法

3、代码示例

四、三者区别

1、sessionStorage与localStorage区别

2、sessionStorage、localStorage、cookie区别

五、往期相关优质推荐

---

一、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请求中都会自动发送到服务器。

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

五、往期相关优质推荐

VSCode 最全实用插件（VIP典藏版）

Vue超详细整理（VIP典藏版）

Vue中created，mounted，updated详解

一文快速上手Echarts（持续更新）

Vue中el-table数据项扩展各种类型总结（持续更新）

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

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