JavaScript Academy · 课时

存储事件与限制

Q: 「存储事件与限制」这节课中我会学到什么？

响应变化并遵守配额限制。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

响应变化并遵守配额限制。

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

响应存储变化

storage 事件让一个标签页能够在另一个标签页修改 localStorage 时作出响应。它可以实现简单的跨标签页同步。

监听存储变化

在 window 上添加监听器。每当 localStorage 发生变化时，它会在同一源的其他标签页中触发，而不会在执行修改的标签页中触发。

window.addEventListener("storage", (e) => {
  console.log("Key changed:", e.key);
});

StorageEvent 对象

该事件携带 key、oldValue、newValue、storageArea 和 url。这些信息共同准确描述了发生的变化。

window.addEventListener("storage", (e) => {
  console.log(e.key, e.oldValue, "->", e.newValue);
});

仅在其他标签页中触发

有一个关键细节：事件不会在调用 setItem 的同一个标签页中触发。它的用途是通知其他标签页，因此不要依赖它来处理同一标签页内的更新。

跨标签页同步模式

可以使用该事件让各个标签页保持一致。例如，当一个标签页清除身份验证令牌时，让所有标签页中的用户退出登录。

window.addEventListener("storage", (e) => {
  if (e.key === "token" && e.newValue === null) {
    logoutUI();
  }
});

检测清除操作

运行 clear() 时，事件会以 key 为 null 的形式触发。请处理这种情况，以重置所有内容。

window.addEventListener("storage", (e) => {
  if (e.key === null) resetApp();
});

存储配额

每个源都会获得有限的存储额度，localStorage 通常总共约为 5MB。这远小于 IndexedDB，因此只能存储适量的数据。

超出配额错误

超出配额时，setItem 会抛出 QuotaExceededError。对于大量写入或不受信任的写入，请始终使用 try/catch 包裹。

try {
  localStorage.setItem("big", hugeString);
} catch (e) {
  console.log("Storage full:", e.name);
}

UTF-16 使占用量翻倍

字符串以 UTF-16 存储，因此每个字符大约占用 2 个字节。5MB 的配额大约可以存储 250 万个字符；对于非 ASCII 文本，可存储的字符数会更少。

估算使用量

可以通过累加键和值的长度来粗略测量使用量。虽然没有精确的接口，但这种方法可以提供实用的估算值。

let total = 0;
for (let i = 0; i < localStorage.length; i++) {
  const k = localStorage.key(i);
  total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");

何时选择更大的存储方案

对于超过几 MB 的大型或结构化数据，请使用 IndexedDB。网页存储最适合保存小型标志、偏好设置和令牌。

快速检查

存储事件和存储限制。

回顾

storage 事件会向同一源中的其他标签页通知 localStorage 的变化，并携带 key、oldValue 和 newValue（清除时 key 为 null）。配额约为 5MB，超出配额写入会抛出 QuotaExceededError，因此请用 try/catch 包裹有风险的写入，并使用 IndexedDB 存储更大的数据。

常见问题解答

「存储事件与限制」课时是免费的吗？

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

「存储事件与限制」这节课中我会学到什么？

响应变化并遵守配额限制。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「存储事件与限制」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy