使用 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 仍然是一個非常方便和實用的工具。
