HTML Academy · 课时

获取、设置和移除项目

Q: 「获取、设置和移除项目」这节课中我会学到什么？

使用 Web Storage API 读取和写入数据 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Web Storage API 读取和写入数据

第 2 / 4 课13 个步骤

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

存储接口的组成

localStorage 和 sessionStorage 都提供相同的四个核心方法：getItem(key)、setItem(key, value)、removeItem(key) 和 clear()。它们是由浏览器支持的简单键值存储。

setItem 存储字符串

localStorage.setItem("theme", "dark") 会将一个字符串以键名 "theme" 持久保存。键和值都必须是字符串——非字符串值会在存储前通过字符串转换函数强制转换，这会无声地破坏对象和数组。

localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");

使用 JSON 存储对象

要存储结构化数据，请使用 JSON 进行序列化：localStorage.setItem("user", JSON.stringify(user))。读取数据：const user = JSON.parse(localStorage.getItem("user"))。请始终使用异常捕获结构包裹解析，以防存储的值格式错误。

const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));

getItem 返回字符串或 null

当键不存在时，getItem("missing") 会返回 null，绝不会返回 undefined。请使用空值合并运算符提供默认值：const theme = localStorage.getItem("theme") ?? "light"。

属性访问语法

您也可以使用方括号和点号表示法：localStorage.theme = "dark" 和 localStorage["theme"]。两者都能正常工作，但意图不够明确——请优先使用显式的方法调用，因为这样能清楚表明这是持久化存储，而不是对象属性。

removeItem 和 clear

localStorage.removeItem("theme") 会删除单个键。localStorage.clear() 会清除当前源的所有键。clear() 具有破坏性——除非有充分理由，否则绝不要调用它；它会删除页面上每个脚本设置的数据。

遍历已存储的键

使用 localStorage.length 和 localStorage.key(index) 遍历所有已存储的键，或展开 Object.keys(localStorage)。这对数据迁移、调试以及按前缀清理很有用，例如删除所有以 "cache:" 开头的键。

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

配额超限错误

浏览器为每个源分配大约 5-10 MB 的空间。超过配额会抛出 QuotaExceededError。存储图像缓存或文档草稿等可能较大的值时，请使用异常捕获结构包裹 setItem，避免错误导致应用崩溃。

try {
  localStorage.setItem("draft", largeString);
} catch (e) {
  if (e.name === "QuotaExceededError") {
    // free space, warn user, or fall back
  }
}

为键设置命名空间

存储空间在整个源内共享。请在键前加上应用或功能名称（app:settings、cart:items），以避免与同一源上运行的其他脚本、第三方库和浏览器扩展发生冲突。

同步且阻塞

存储接口完全同步——每次调用都会阻塞主线程，直到磁盘读写完成。请避免存储非常大的数据块，也不要在紧密循环中调用 setItem；应将更新批量合并到单个序列化对象中。

sessionStorage 与 localStorage

接口相同，生命周期不同。sessionStorage 会在标签页关闭时清除；localStorage 会跨浏览器重启保留。临时向导状态应选择 sessionStorage，而应在刷新后继续保留的用户偏好应选择 localStorage。

知识检查

当键从未设置过时，localStorage.getItem("missing-key") 会返回什么？

在交互式课程中回答

总结

getItem、setItem、removeItem 和 clear 是网页存储的四大核心方法。值始终是字符串，因此请使用 JSON 包装结构化数据。请考虑 null 返回值、QuotaExceededError，并设置命名空间，以便与其他脚本友好地共享源。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 40
课程: 159

免费开始学习查看完整课程

常见问题解答

「获取、设置和移除项目」课时是免费的吗？

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

「获取、设置和移除项目」这节课中我会学到什么？

使用 Web Storage API 读取和写入数据你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「获取、设置和移除项目」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML Academy