使用 sessionStrage 存儲數據的實用場景探索

緒論

隨著 Web 應用越來越復雜，我們經常需要在不同的頁面或刷新頁面時保存一些數據。而使用瀏覽器的 sessionStorage 可以很方便地實現這一需求。本文將探索幾個常見的場景，并提供具體的代碼示例。希望能幫助讀者更好地理解和應用 sessionStorage。

一、表單數據存儲

在很多應用中，我們常常需要保存用戶正在填寫的表單數據，以防止用戶誤操作或頁面刷新導致數據丟失。使用 sessionStorage 可以很輕松地實現這一功能。

以下是一個簡單的示例：假設我們有一個包含姓名和年齡兩個輸入框的表單。當用戶填寫完表單后，我們將數據保存到 sessionStorage 中。代碼如下：

// 獲取表單元素
const form = document.querySelector('#myForm');
const nameInput = form.querySelector('#name');
const ageInput = form.querySelector('#age');

// 監聽表單提交事件
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 獲取用戶輸入的數據
  const name = nameInput.value;
  const age = ageInput.value;
  
  // 存儲數據到 sessionStorage
  sessionStorage.setItem('name', name);
  sessionStorage.setItem('age', age);
});

在另一個頁面或刷新當前頁面后，我們可以使用以下代碼來恢復之前保存的表單數據：

// 獲取保存的數據
const savedName = sessionStorage.getItem('name');
const savedAge = sessionStorage.getItem('age');

// 恢復數據到表單中
nameInput.value = savedName;
ageInput.value = savedAge;

二、購物車數據存儲

另一個常見的應用場景是保存用戶的購物車數據。當用戶在網站上選購商品時，我們可以將商品信息保存到 sessionStorage 中，以便用戶在后續轉到結算頁面時能夠看到之前選擇的商品。

以下是一個簡單的示例：假設用戶可以在商品列表中選擇商品，并將選擇的商品添加到購物車中。用戶每次選擇商品時，我們都將商品信息保存到 sessionStorage 中。代碼如下：

// 獲取商品列表元素
const products = document.querySelectorAll('.product');

// 監聽商品選擇事件
products.forEach(function (product) {
  const btn = product.querySelector('button');
  btn.addEventListener('click', function () {
    // 獲取商品信息
    const name = product.querySelector('.name').textContent;
    const price = product.querySelector('.price').textContent;
    
    // 獲取購物車數據（如果有）
    const cart = JSON.parse(sessionStorage.getItem('cart')) || [];

    // 添加選擇的商品到購物車
    cart.push({ name, price });

    // 更新購物車數據
    sessionStorage.setItem('cart', JSON.stringify(cart));
  });
});

在結算頁面或刷新當前頁面后，我們可以使用以下代碼來獲取購物車數據并顯示給用戶：

// 獲取購物車數據
const cart = JSON.parse(sessionStorage.getItem('cart'));

// 顯示購物車數據
cart.forEach(function (item) {
  // 創建 DOM 元素，并顯示數據
});

三、用戶登錄狀態存儲

最后一個場景是保存用戶的登錄狀態。例如，用戶在登錄頁面輸入用戶名和密碼后，我們可以將登錄狀態保存到 sessionStorage 中，以便用戶在瀏覽網站的其他頁面時保持登錄狀態。

以下是一個簡單的示例：假設用戶在登錄頁登錄成功后，我們將登錄狀態保存到 sessionStorage 中。代碼如下：

// 監聽登錄表單提交事件
const form = document.querySelector('#loginForm');
form.addEventListener('submit', function (e) {
  e.preventDefault();
  
  // 獲取用戶輸入的用戶名和密碼
  const username = form.querySelector('#username').value;
  const password = form.querySelector('#password').value;
  
  // 模擬登錄驗證
  const isLoggedIn = checkLogin(username, password);
  
  // 保存登錄狀態到 sessionStorage
  sessionStorage.setItem('isLoggedIn', isLoggedIn);
});

在其他頁面中，我們可以使用以下代碼檢查用戶的登錄狀態：

// 檢查登錄狀態
const isLoggedIn = sessionStorage.getItem('isLoggedIn');

if (isLoggedIn) {
  // 用戶已登錄，執行相應的操作
} else {
  // 用戶未登錄，執行相應的操作
}

通過以上幾個具體場景的代碼示例，我們可以看到 sessionStorage 在 Web 開發中的實際應用。它可以輕松地幫助我們存儲和恢復數據，使用戶體驗更加友好。當然，sessionStorage 也有一些限制，例如數據只在當前瀏覽器窗口關閉前有效，且每個頁面的 sessionStorage 數據是相互獨立的。但在很多場景下，sessionStorage 仍然是一個非常方便和實用的工具。