本地存储与会话存储：何时使用每种存储（对于小型项目）-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;
    }
});

登录后复制

这里的关键是，如果有人不小心关闭了选项卡，他们会重新开始 - 不会有过时的数据。但如果他们只是在步骤之间导航，那么他们的进度是安全的。