如何使用 JavaScript 操作本地存储（localStorage/sessionStorage）？

本文链接：https://blog.csdn.net/huang3513/article/details/144976906

本地存储：`localStorage` 和 `sessionStorage`

在 JavaScript 中，localStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在浏览器中存储数据。它们之间的主要区别是：

localStorage：数据持久存储，即使浏览器关闭，数据依然存在。
sessionStorage：数据仅在当前会话中存在，当浏览器窗口或标签页关闭时，数据会被清除。

这两者都可以存储字符串类型的数据，但可以通过 JSON 序列化（JSON.stringify）和反序列化（JSON.parse）存储和读取对象、数组等复杂数据结构。

基本使用方法

1. `localStorage` 示例

设置数据：

localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('age', '30');

获取数据：

const username = localStorage.getItem('username'); // 'JohnDoe'
const age = localStorage.getItem('age'); // '30'

删除数据：

localStorage.removeItem('username');

清空所有数据：

localStorage.clear();

数据持久性：

当你关闭浏览器并重新打开它时，localStorage 中的数据依然存在。你可以在后续的页面访问中读取这些数据。

2. `sessionStorage` 示例

设置数据：

sessionStorage.setItem('username', 'JaneDoe');
sessionStorage.setItem('age', '25');

获取数据：

const username = sessionStorage.getItem('username'); // 'JaneDoe'
const age = sessionStorage.getItem('age'); // '25'

删除数据：

sessionStorage.removeItem('username');

清空所有数据：

sessionStorage.clear();

数据生命周期：

sessionStorage 中的数据仅在当前会话期间有效。关闭浏览器标签页或窗口时，数据会被清除。

在实际项目中的应用

我们可以将本地存储用于各种应用场景，例如用户身份验证、用户设置或购物车状态存储等。

示例 1：用户登录状态管理

假设你正在开发一个简单的登录页面，当用户成功登录时，将用户名和身份标识存储在 localStorage 中，后续页面可以读取这些数据来判断用户是否已经登录。

HTML（登录页面）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
</head>
<body>
  <h1>Login</h1>
  <form id="loginForm">
    <input type="text" id="username" placeholder="Username" required>
    <input type="password" id="password" placeholder="Password" required>
    <button type="submit">Login</button>
  </form>
  
  <script src="login.js"></script>
</body>
</html>

JavaScript（`login.js`）：

document.getElementById('loginForm').addEventListener('submit', function(event) {
  event.preventDefault();
  
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  // 假设进行简单的用户名和密码验证
  if (username === 'admin' && password === '1234') {
    // 登录成功，存储登录信息到 localStorage
    localStorage.setItem('username', username);
    localStorage.setItem('isLoggedIn', 'true');
    alert('Login successful!');
    
    // 跳转到欢迎页面
    window.location.href = 'welcome.html';
  } else {
    alert('Invalid credentials');
  }
});

欢迎页面（`welcome.html`）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Welcome</title>
</head>
<body>
  <h1>Welcome</h1>
  <p id="welcomeMessage"></p>
  
  <script src="welcome.js"></script>
</body>
</html>

JavaScript（`welcome.js`）：

// 在欢迎页面加载时，检查用户是否已登录
window.onload = function() {
  const isLoggedIn = localStorage.getItem('isLoggedIn');
  const username = localStorage.getItem('username');
  
  if (isLoggedIn === 'true' && username) {
    document.getElementById('welcomeMessage').textContent = `Welcome, ${username}!`;
  } else {
    alert('You are not logged in');
    window.location.href = 'login.html';
  }
};

解释：

登录页面：用户输入用户名和密码进行登录，如果验证成功，将用户名和登录状态存储到 localStorage 中。
欢迎页面：当用户访问欢迎页面时，首先检查 localStorage 中是否存储了登录信息，如果有，则显示欢迎信息；否则，跳转到登录页面。

示例 2：实现一个简单的购物车功能

在电商网站中，可以使用 localStorage 来存储用户的购物车内容，确保在用户关闭浏览器后仍能保存购物车的状态。

HTML（购物车页面）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shopping Cart</title>
</head>
<body>
  <h1>Your Shopping Cart</h1>
  <div id="cartItems"></div>
  <button id="clearCart">Clear Cart</button>
  
  <script src="cart.js"></script>
</body>
</html>

JavaScript（`cart.js`）：

// 添加商品到购物车
function addToCart(product) {
  let cart = JSON.parse(localStorage.getItem('cart')) || [];
  cart.push(product);
  localStorage.setItem('cart', JSON.stringify(cart));
}

// 渲染购物车内容
function renderCart() {
  const cart = JSON.parse(localStorage.getItem('cart')) || [];
  const cartItemsContainer = document.getElementById('cartItems');
  
  if (cart.length === 0) {
    cartItemsContainer.innerHTML = 'Your cart is empty.';
  } else {
    cartItemsContainer.innerHTML = cart.map(item => `<p>${item.name} - $${item.price}</p>`).join('');
  }
}

// 清空购物车
document.getElementById('clearCart').addEventListener('click', function() {
  localStorage.removeItem('cart');
  renderCart();
});

// 页面加载时渲染购物车
window.onload = renderCart;

// 示例：添加一些商品到购物车
addToCart({ name: 'Laptop', price: 999 });
addToCart({ name: 'Headphones', price: 199 });

解释：

购物车功能：通过 localStorage 存储购物车中的商品列表（使用 JSON.stringify 存储数组，使用 JSON.parse 读取）。
页面加载时：当页面加载时，检查 localStorage 中是否有购物车数据，并渲染到页面上。
清空购物车：点击“清空购物车”按钮时，删除 localStorage 中的购物车数据，并刷新页面。

总结

localStorage 和 sessionStorage 是用于在客户端存储数据的 Web API，可以存储字符串、对象等数据。
localStorage 用于持久存储数据，页面关闭后数据仍然存在；sessionStorage 用于会话存储，浏览器关闭或标签页关闭时数据消失。
在实际项目中，常见的应用包括用户认证、购物车状态、用户设置等场景。

通过实际项目中的示例，您可以更清晰地理解如何使用这两个存储方法来管理浏览器中的数据。