JavaScript Academy · 课时

localStorage 与 sessionStorage

Q: 「localStorage 与 sessionStorage」这节课中我会学到什么？

选择合适的存储生命周期。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

选择合适的存储生命周期。

localStorage 与 sessionStorage 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

两个存储区，相同的接口

localStorage 和 sessionStorage 具有完全相同的方法。区别在于生命周期：数据可以保留多长时间。

localStorage 会持久保存

localStorage 中的数据会一直保留，直到被明确移除。即使重新加载页面、关闭标签页或重启浏览器，数据也不会消失。

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage 是临时的

sessionStorage 中的数据只在标签页会话期间保留。关闭标签页后，数据就会被清除。

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

按标签页隔离

每个浏览器标签页都有自己的 sessionStorage。同一网站的两个标签页拥有独立的会话存储，不会共享数据（NOT）。

localStorage 可共享

相比之下，同一来源的所有标签页和窗口共享一个 localStorage。在一个标签页中的写入，其他标签页也能看到。

重新加载时的行为

普通重新加载会保留该标签页的 sessionStorage。复制标签页可能会复制会话，但打开全新的标签页时存储为空。

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

在两者之间进行选择

对于长期保留的偏好设置（theme、语言），请使用 localStorage。对于临时的单标签页状态（向导步骤、一次性表单草稿），请使用 sessionStorage。

安全注意事项

这两种存储都不安全。页面上的任何脚本都可以读取它们，因此请勿存储密码或必须保持私密的敏感令牌。

各处使用相同的方法

由于两个接口相同，只需更改对象名称，就可以用一个替换另一个。针对其中一个编写的代码也适用于另一个。

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

隐私浏览

在隐私浏览/无痕模式下，两个存储通常会在会话结束时清除，并且某些浏览器会限制或禁用它们。请始终处理写入失败的可能性。

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

配额彼此独立

每个存储都有自己的配额（每个来源通常约为 5MB）。填满 sessionStorage 不会占用 localStorage 的配额。

快速检查

比较两个存储区。

回顾

两个存储区共享相同的接口，但生命周期不同。localStorage 会跨会话持久保存，并由同一来源的所有标签页共享；sessionStorage 只在一个标签页会话期间存在，并且按标签页隔离。两者都不安全，而且各自拥有约 5MB 的配额。

常见问题解答

「localStorage 与 sessionStorage」课时是免费的吗？

是的 — 「localStorage 与 sessionStorage」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「localStorage 与 sessionStorage」这节课中我会学到什么？

选择合适的存储生命周期。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「localStorage 与 sessionStorage」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy