本機儲存與會話儲存：何時使用每種儲存（對於小型專案）-js教程-PHP中文網

Local Storage vs Session Storage: When to Use Each (With Mini Projects)

您是否想過是否應該在 Web 應用程式中使用 localStorage 還是 sessionStorage？你並不孤單！

我也遇到過這種情況 - 想知道這兩個儲存選項中哪一個最適合我的用例。

看，Web 儲存並不是 Web 開發中最令人著迷的部分，但它對於建立實際執行某些操作的現代 Web 應用程式至關重要。

如果您想儲存使用者首選項、使用表單資料或購物車，您需要確定哪種儲存方法適合您的用例。

我不想解釋所有細節，因為這會涉及太多理論，有時理論會令人困惑。我將透過真實的程式碼範例向您展示這兩種儲存。

您將在本文末尾知道何時應用哪種解決方案......

那就跟著我吧！

基礎知識：您真正需要了解的內容

localStorage 就像一本筆記本，sessionStorage 就像一疊便條紙。您的筆記本將留在您身邊，直到您撕下頁面（清除資料），而當您關閉辦公桌抽屜（結束會話）時，便利貼將被丟棄。

以下是一些共同點：

它們都以鍵值的形式儲存資料。
它們為您提供大約 5-10MB 的儲存空間（取決於瀏覽器）
它們是同步的並且只儲存字串（是的，甚至你的物件也需要 JSON 轉換）
它們可以透過相同的簡單 API 存取。

現在，以下是它們的不同之處：

本地儲存：

一直存在，直到您手動清除它
跨瀏覽器標籤和視窗保留資料
不要保留某些內容太久（例如使用者偏好或已儲存的遊戲狀態）

會話儲存：

當您關閉瀏覽器標籤時它就會消失。
與您正在使用的特定選項卡保持隔離
非常適合不應保留的臨時資料（例如表單狀態或一次性令牌）

快速旁注：兩種儲存類型都僅限前端。不要在此處處理敏感資料 - 這就是安全後端儲存的用途。

本地儲存深入研究

讓我們面對現實吧 - 您可能大部分時間都在使用此存儲，並且有充分的理由。當您需要在瀏覽器會話之間保留資料時，沒有比 localStorage 更好的選擇了。

本地儲存的最佳用例：

主題偏好（深色/淺色模式）
購物車中的商品
使用者的語言設定
遊戲進度
快取的 API 回應

快速提醒 - 我看過太多開發者以艱難的方式學習這些：

不要在這裡儲存敏感資料（這不安全）
注意儲存限制
儲存前記得使用 JSON.stringify
小心過期 - localStorage 不會自動過期

讓我給您一個非常簡單的主題切換器的具體範例。

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved theme on page load
document.addEventListener('DOMContentLoaded', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
        body.classList.add(savedTheme);
        themeToggle.checked = savedTheme === 'dark-mode';
    }
});

// Handle theme changes
themeToggle.addEventListener('change', () => {
    if (themeToggle.checked) {
        body.classList.add('dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    } else {
        body.classList.remove('dark-mode');
        localStorage.setItem('theme', 'light-mode');
    }
});

登入後複製

這段程式碼非常簡單，它將保存使用者首選的主題，並在使用者重新造訪時自動套用。沒什麼花俏的，只是實用。

會話存儲

有時您需要資料保留一段時間 - 這是 sessionStorage 的亮點。

想想那些時候，您想要追蹤某些內容，直到用戶關閉其瀏覽器選項卡，而不是再多一秒。

sessionStorage 的完美場景：

多步驟表單資料
臨時驗證令牌
單會話使用者偏好
長文章中的頁面位置
精靈或教學進度

這是我們的多步驟表單程式碼，顯示了 sessionStorage 的實際應用：

// Multi-Step Form Mini-Project
const formSteps = {
    saveStep(stepNumber, data) {
        sessionStorage.setItem(`formStep${stepNumber}`, JSON.stringify(data));
    },

    loadStep(stepNumber) {
        const savedData = sessionStorage.getItem(`formStep${stepNumber}`);
        return savedData ? JSON.parse(savedData) : null;
    },

    clearForm() {
        // Clear only our form data, not other sessionStorage items
        for (let i = 1; i <= 3; i++) {
            sessionStorage.removeItem(`formStep${i}`);
        }
    }
};

// Example usage in form steps
document.getElementById('step1-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    };
    formSteps.saveStep(1, data);
    // Move to next step
});

// Load saved data when user returns to a step
window.addEventListener('load', () => {
    const step1Data = formSteps.loadStep(1);
    if (step1Data) {
        document.getElementById('name').value = step1Data.name;
        document.getElementById('email').value = step1Data.email;
    }
});

登入後複製

這裡的關鍵是，如果有人不小心關閉了選項卡，他們會重新開始 - 不會有過時的數據。但如果他們只是在步驟之間導航，那麼他們的進度是安全的。