使用JavaScript操作本地存儲

更新時間：2025年01月07日 10:57:12 作者：瘋狂的沙粒

這篇文章主要為大家詳細介紹了JavaScript中操作本地存儲的相關知識,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下

本地存儲：localStorage 和 sessionStorage

在 JavaScript 中，localStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在瀏覽器中存儲數(shù)據(jù)。它們之間的主要區(qū)別是：

localStorage：數(shù)據(jù)持久存儲，即使瀏覽器關閉，數(shù)據(jù)依然存在。
sessionStorage：數(shù)據(jù)僅在當前會話中存在，當瀏覽器窗口或標簽頁關閉時，數(shù)據(jù)會被清除。

這兩者都可以存儲字符串類型的數(shù)據(jù)，但可以通過 JSON 序列化（JSON.stringify）和反序列化（JSON.parse）存儲和讀取對象、數(shù)組等復雜數(shù)據(jù)結構。

基本使用方法

1. localStorage 示例

設置數(shù)據(jù)：

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

獲取數(shù)據(jù)：

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

刪除數(shù)據(jù)：

localStorage.removeItem('username');

清空所有數(shù)據(jù)：

localStorage.clear();

數(shù)據(jù)持久性：

當你關閉瀏覽器并重新打開它時，localStorage 中的數(shù)據(jù)依然存在。你可以在后續(xù)的頁面訪問中讀取這些數(shù)據(jù)。

2. sessionStorage 示例

設置數(shù)據(jù)：

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

獲取數(shù)據(jù)：

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

刪除數(shù)據(jù)：

sessionStorage.removeItem('username');

清空所有數(shù)據(jù)：

sessionStorage.clear();

數(shù)據(jù)生命周期：

sessionStorage 中的數(shù)據(jù)僅在當前會話期間有效。關閉瀏覽器標簽頁或窗口時，數(shù)據(jù)會被清除。

實際項目中的應用

我們可以將本地存儲用于各種應用場景，例如用戶身份驗證、用戶設置或購物車狀態(tài)存儲等。

示例 1：用戶登錄狀態(tài)管理

假設你正在開發(fā)一個簡單的登錄頁面，當用戶成功登錄時，將用戶名和身份標識存儲在 localStorage 中，后續(xù)頁面可以讀取這些數(shù)據(jù)來判斷用戶是否已經登錄。

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';
  }
};

解釋：

登錄頁面：用戶輸入用戶名和密碼進行登錄，如果驗證成功，將用戶名和登錄狀態(tài)存儲到 localStorage 中。

歡迎頁面：當用戶訪問歡迎頁面時，首先檢查 localStorage 中是否存儲了登錄信息，如果有，則顯示歡迎信息；否則，跳轉到登錄頁面。

示例 2：實現(xiàn)一個簡單的購物車功能

在電商網(wǎng)站中，可以使用 localStorage 來存儲用戶的購物車內容，確保在用戶關閉瀏覽器后仍能保存購物車的狀態(tài)。

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 存儲數(shù)組，使用 JSON.parse 讀取）。

頁面加載時：當頁面加載時，檢查 localStorage 中是否有購物車數(shù)據(jù)，并渲染到頁面上。

清空購物車：點擊“清空購物車”按鈕時，刪除 localStorage 中的購物車數(shù)據(jù)，并刷新頁面。