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

您是否想过是否应该在 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;
    }
});

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

做出正确的选择

让我们切入正题 - 以下是推动您做出存储决定的因素：

在以下情况下选择 localStorage：

• 用户希望他们的数据能够持续存在（例如保存的偏好设置）
• 您正在缓存不经常更改的数据
• 您需要在选项卡之间共享数据
• 用户便利性胜过数据新鲜度

在以下情况下使用 sessionStorage：

• 数据在设计上应该是临时的
• 您正在处理敏感的临时令牌
• 每个选项卡都需要自己的隔离状态
• 您希望在重新启动时保证干净整洁

真正重要的性能提示：

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

常见问题：

• 在存储之前始终对对象进行字符串化
• 不要假设存储空间可用
• 注意多选项卡场景中的存储事件
• 记得清理旧的/未使用的数据

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

当有疑问时，问问自己：
“浏览器重新启动后，这些数据是否应该继续存在？”

• 是 → 本地存储
• 否 → sessionStorage

这就是您做出正确选择所需要知道的一切。开始建造！

以上是本地存储与会话存储：何时使用每种存储（对于小型项目）的详细内容。更多信息请关注PHP中文网其他相关文章！