谈一谈LocalStorage与SessionStorage的区别

2023-10-26 13:27:02

LocalStorage与SessionStorage是两种不同的Web存储方式，它们都存储在客户端，但它们的工作方式不同。

LocalStorage

LocalStorage是永久性的存储，这意味着数据会一直存储在浏览器中，直到用户手动清除它们。
LocalStorage的数据在不同的浏览器窗口和标签页之间是共享的。
LocalStorage的数据大小限制为5MB。

SessionStorage

SessionStorage是临时性的存储，这意味着数据只会在当前浏览器会话中存储。当用户关闭浏览器或切换标签页时，SessionStorage的数据将被清除。
SessionStorage的数据在不同的浏览器窗口和标签页之间不共享。
SessionStorage的数据大小限制也为5MB。

以下是LocalStorage与SessionStorage的主要区别：

特性	LocalStorage	SessionStorage
存储时间	永久性	临时性
共享性	在不同的浏览器窗口和标签页之间共享	在不同的浏览器窗口和标签页之间不共享
数据大小限制	5MB	5MB

什么时候使用LocalStorage和SessionStorage？

LocalStorage适合存储一些不经常变化的数据，例如用户首选项、登录信息等。
SessionStorage适合存储一些临时性的数据，例如购物车中的商品、表单中的输入内容等。

使用示例

LocalStorage

// 设置一个名为"username"的LocalStorage项
localStorage.setItem("username", "John Doe");

// 获取一个名为"username"的LocalStorage项
var username = localStorage.getItem("username");

// 删除一个名为"username"的LocalStorage项
localStorage.removeItem("username");

// 清除所有LocalStorage项
localStorage.clear();

SessionStorage

// 设置一个名为"cart"的SessionStorage项
sessionStorage.setItem("cart", JSON.stringify(["Apple", "Orange", "Banana"]));

// 获取一个名为"cart"的SessionStorage项
var cart = JSON.parse(sessionStorage.getItem("cart"));

// 删除一个名为"cart"的SessionStorage项
sessionStorage.removeItem("cart");

// 清除所有SessionStorage项
sessionStorage.clear();