本地存储与会话存储：何时使用（使用小型项目）

# Web 开发# JavaScript# 编程# 教程

您是否曾经想过在 Web 应用程序中是否应该使用 localStorage 或 sessionStorage？您并不孤单！

我也遇到过这种情况——想知道这两种存储选项哪一种最适合我的用例。

看起来，网络存储并不是网络开发中最迷人的部分，但它对于构建真正能做某事的现代网络应用程序至关重要。

如果您想保存用户偏好、处理表单数据或购物车，您需要决定哪种存储方法适合您的用例。

我不想解释所有细节，因为那会涉及太多理论，有时理论会令人困惑。我将用真实的代码示例向您展示这两种存储。

读完这篇文章后，您将知道何时应用哪种解决方案......

所以跟我一起来吧！

基础知识：你真正需要知道的内容

localStorage 就像一本笔记本，而 sessionStorage 就像一叠便签。笔记本会一直伴随着你，直到你撕掉页面（清除数据），而便签则会在你关上抽屉（结束会话）时被扔掉。

以下是一些共同点：

  • 它们都以键值的形式存储数据。
  • 它们会给你大约 5-10MB 的存储空间（取决于浏览器）
  • 它们是同步的并且只存储字符串（是的，即使你的对象也需要 JSON 转换）
  • 可以通过相同的简单 API 访问它们。

    • 现在，看看它们的不同之处：

    **本地存储：**

  • 一直存在，直到你手动清除它
  • 跨浏览器选项卡和窗口保留数据
  • 不要保留某些内容太久（例如用户偏好或保存的游戏状态）

    • **会话存储：**

  • 当您关闭浏览器标签时它就会消失。
  • 保持与你正在工作的特定选项卡隔离
  • 非常适合不应持久保存的短暂数据（如表单状态或一次性令牌）

    • **快速补充说明**：两种存储类型都只用于前端。请勿在此处理敏感数据 — 这是安全后端存储的用途。

    localStorage 深度探究

    让我们面对现实吧 - 您可能大多数时间都使用这种存储，而且有充分的理由。当您需要在浏览器会话之间保留数据时，没有比 localStorage 更好的选择了。

    **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');
    }
});

    这段代码非常简单，它会保存用户喜欢的主题，并在用户再次访问时自动应用。没有什么特别的，只是实用而已。

    session存储

    有时您需要暂时保留数据 - 这时 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;
    }
});

    关键在于，如果有人不小心关闭了标签页，他们就会重新开始 - 不会留下任何陈旧数据。但如果他们只是在步骤之间导航，他们的进度是安全的。

    做出正确的选择

    让我们直奔主题——以下是影响您存储决策的因素：

    **在下列情况下选择 localStorage：**

  • 用户希望他们的数据能够保留下来（比如保存的偏好设置）
  • 你正在缓存不经常更改的数据
  • 您需要在标签之间共享数据
  • 用户便利性比数据新鲜度更重要

    • **在下列情况下使用 sessionStorage：**

  • 数据应按设计临时
  • 您正在处理敏感的临时令牌
  • 每个选项卡都需要有自己的隔离状态
  • 您希望在重启时获得一个保证的干净状态

    • **真正重要的性能技巧：**

  • 不要存储大量对象 - 两种存储类型都是同步的
  • 尽可能批量执行存储操作
  • 记住 5-10MB 的限制
  • 始终处理存储错误（用户可能已禁用此功能）

    • **常见问题：**

  • 存储之前始终将对象字符串化
  • 不要假设有存储空间
  • 注意多标签场景中的存储事件
  • 记得清理旧的/未使用的数据

    • **最后的想法：**为正确的工作选择正确的工具。localStorage 并不总是因为它是持久的而更好，sessionStorage 也并不总是因为它更干净而更好。首先考虑用户的需求。

    如有疑问，请问自己：

    “浏览器重启后这些数据还能保留下来吗？”

  • 是 → localStorage
  • 否 → sessionStorage

    • 这就是您需要了解的全部内容，以便做出正确的选择。开始构建吧！