首页 前端知识 【Vue】浏览器缓存sessionStorage、localStorage、Cookie

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

2024-04-15 21:04:07 前端知识 前端哥 25 150 我要收藏

目录

一、sessionStorage

1、简介

2、方法

3、代码示例

a、存取单个数据

b、存取对象

c、清除数据

二、localStorage

1、简介

2、方法

3、代码示例

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');

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请求中都会自动发送到服务器。
特性sessionStoragelocalStoragecookie
存储容量5MB5MB4KB
生命周期单个会话期间永久可设置
存储位置客户端客户端客户端
存储机制键值对键值对键值对
跨窗口通信不支持不支持支持
跨域名访问不支持不支持支持
浏览器支持现代浏览器现代浏览器所有浏览器
与服务器交互不自动发送不自动发送自动发送

五、往期相关优质推荐

VSCode 最全实用插件(VIP典藏版)
Vue超详细整理(VIP典藏版)
Vue中created,mounted,updated详解
一文快速上手Echarts(持续更新)
Vue中el-table数据项扩展各种类型总结(持续更新)

有用请点赞,养成良好习惯!

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4993.html
标签
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!