使用JavaScript操作本地存储-牛翰网

本地存储：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 中的购物车数据，并刷新页面。