Vue浏览器缓存sessionStorage+localStorage+Cookie

目录

sessionStorage

简介

方法

代码示例

存取单个数据

存取对象

清除数据

localStorage

简介

方法

代码示例

简介

方法

代码示例

区别

sessionStorage与localStorage区别

sessionStorage、localStorage、cookie区别


sessionStorage

简介

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

方法

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

代码示例

列表页搜索条件缓存, 使用sessionStorage实现简单的功能, 

存储数据+读取数据+清除数据

存取单个数据

sessionStorage.setItem("param", "我叫你一声你敢答应吗?");

let param = sessionStorage.getItem("param")

console.log(param ); // => 我叫你一声你敢答应吗?

存取对象

sessionStorage也可存储Json对象:

存储时,通过JSON.stringify()将对象转换为文本格式;

读取时,通过JSON.parse()将文本转换回对象。

sessionStorage.setItem("queryParams", JSON.stringify(this.queryParams));

if (sessionStorage.getItem("queryParams")) {
  this.queryParams = JSON.parse(sessionStorage.getItem("queryParams"));
}

清除数据

sessionStorage.removeItem("queryParams");

localStorage

简介

   - localStorage用于在浏览器中永久存储数据,即使用户关闭浏览器标签页或窗口,数据仍然保留。
   - 存储的数据不会自动过期,除非显式地从代码中删除或用户清除浏览器缓存。

   - 存放数据大小一般为5MB;

   - 仅在浏览器中保存,不参与服务器通信;

方法

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

代码示例

// 设置localStorage中的数据
localStorage.setItem('key', 'value');

// 获取localStorage中的数据
const value = localStorage.getItem('key');
console.log(value);  // 输出:value

// 删除localStorage中的数据
localStorage.removeItem('key');

cookie

简介

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

方法

  • 使用document.cookie属性进行设置和获取Cookie值。
  • 使用document.cookie = "key=value; expires=expiration_time; path=/;"语法设置Cookie。
  • 使用document.cookie获取所有Cookie值。
  • 使用document.cookie = "key=; expires=expiration_time; path=/;"语法删除Cookie。

代码示例

// 设置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用于跟踪用户和设置过期时间的需求。

根据具体的应用需求,选择适合的存储机制可以更好地管理和存储数据。

sessionStorage与localStorage区别

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

sessionStorage、localStorage、cookie区别

  • sessionStorage在浏览器会话期间有效,localStorage是持久的,而Cookie可以设置过期时间。
  • sessionStorage和localStorage的存储容量通常比Cookie大得多。
  • sessionStorage和localStorage的使用方法相似,都是使用setItem、getItem和removeItem方法进行操作,而Cookie使用document.cookie属性。
  • sessionStorage和localStorage只能存储字符串类型的数据,而Cookie可以存储字符串、数字、布尔值等类型的数据。

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

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