前端Web开发中的本地存储-本地化与持久化你的数据

2023-10-05 13:10:05

在前端Web开发中，有时我们需要在本地存储和管理数据，以供以后使用。Web APIs 提供了两种本地存储机制：localStorage 和 sessionStorage。它们都允许您在客户端浏览器中存储数据，但它们在存储期限、作用域和使用方式上有一些关键差异。

1. localStorage

localStorage 是一个持久性的存储机制，这意味着它在浏览器关闭后仍会保留数据。即使您关闭并重新打开浏览器，存储在 localStorage 中的数据仍然可用。这使其非常适合存储长期数据，例如用户首选项、用户设置或缓存的数据。

要使用 localStorage，您可以使用以下方法：

存储数据：

localStorage.setItem("key", "value");

获取数据：

localStorage.getItem("key");

删除数据：

localStorage.removeItem("key");

清除所有数据：

localStorage.clear();

2. sessionStorage

sessionStorage 与 localStorage 类似，但它是一个会话存储机制，这意味着它只在当前浏览器会话期间存储数据。一旦您关闭浏览器或打开新的浏览器窗口，存储在 sessionStorage 中的数据就会被清除。这使其非常适合存储临时数据，例如购物车中的项目或表单数据。

要使用 sessionStorage，您可以使用以下方法：

存储数据：

sessionStorage.setItem("key", "value");

获取数据：

sessionStorage.getItem("key");

删除数据：

sessionStorage.removeItem("key");

清除所有数据：

sessionStorage.clear();

比较

特征	localStorage	sessionStorage
存储期限	持久性	会话性
作用域	所有浏览器窗口	当前浏览器窗口
使用场景	长期数据，如用户首选项、用户设置、缓存数据等	临时数据，如购物车中的项目、表单数据等

示例

示例 1：使用 localStorage 存储用户首选项

// 获取用户首选项
const theme = localStorage.getItem("theme");

// 如果用户首选项不存在，则设置默认主题
if (!theme) {
  localStorage.setItem("theme", "light");
  theme = "light";
}

// 根据用户首选项设置页面主题
document.body.classList.add(theme);

// 用户更改主题时更新 localStorage 中的主题设置
document.getElementById("theme-selector").addEventListener("change", (e) => {
  const newTheme = e.target.value;
  localStorage.setItem("theme", newTheme);
  document.body.classList.replace(theme, newTheme);
  theme = newTheme;
});

示例 2：使用 sessionStorage 存储购物车中的项目

// 获取购物车中的项目
const cartItems = sessionStorage.getItem("cartItems");

// 如果购物车中没有项目，则初始化一个空数组
if (!cartItems) {
  sessionStorage.setItem("cartItems", "[]");
}

// 将新项目添加到购物车中
function addToCart(item) {
  const cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
  cartItems.push(item);
  sessionStorage.setItem("cartItems", JSON.stringify(cartItems));
}

// 从购物车中删除项目
function removeFromCart(item) {
  const cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
  const index = cartItems.indexOf(item);
  if (index > -1) {
    cartItems.splice(index, 1);
  }
  sessionStorage.setItem("cartItems", JSON.stringify(cartItems));
}

// 获取购物车中项目的数量
function getCartCount() {
  const cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
  return cartItems.length;
}