使用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 仍然是一個非常方便和實用的工具。
以上是探索使用sessionStorage儲存資料的實際應用場景的詳細內容。更多資訊請關注PHP中文網其他相關文章！
