HTML5中不存在SetItem与GetItem，正确方法是localStorage或sessionStorage的setItem()和getItem()；前者存键值对（自动转字符串），后者按键取值（返回字符串或null）。

HTML5 中并没有 SetItem 与 GetItem 这两个接口，这是常见的命名误解。实际对应的是 Web Storage API 中的 setItem() 和 getItem() 方法，属于 localStorage 或 sessionStorage 对象的成员函数。

setItem() 的基本调用规范

用于向存储区域写入键值对，必须传入两个字符串参数：键（key）和值（value）。非字符串值会被自动转为字符串。

• 语法：storage.setItem(key, value)，其中 storage 是 localStorage 或 sessionStorage
• 键名和值都必须是字符串；若传入对象、数组或数字，会调用其 toString()，例如 setItem('count', 42) 实际存入字符串 "42"
• 若键已存在，则覆盖原值；若存储空间已满（通常约 5–10MB），会抛出 QuotaExceededError 异常
• 示例：localStorage.setItem('theme', 'dark')

getItem() 的基本调用规范

根据键名读取对应存储的值，返回字符串，若键不存在则返回 null。

• 语法：storage.getItem(key)
• 即使原值是数字或布尔值，返回的仍是字符串，需手动转换，如 parseInt(localStorage.getItem('count'))
• 注意区分 null（键不存在）与 "null"（字符串字面量），避免误判
• 示例：const theme = localStorage.getItem('theme'); // 返回 "dark"

使用时的关键注意事项

这两个方法看似简单，但实际使用中容易踩坑。

• 同源限制严格：协议、域名、端口任一不同，存储空间完全隔离
• 不支持直接存对象，需配合 JSON.stringify() 和 JSON.parse()，例如：
  localStorage.setItem('user', JSON.stringify({name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user'));
• 同步执行，无回调或 Promise，不可 await；大量数据操作可能阻塞主线程（虽罕见）
• 无法监听变化——如需响应式更新，应结合 storage 事件（仅在其他同源窗口触发时广播）

常见错误写法纠正

避免将方法名首字母大写（如 SetItem），也勿混淆为其他 API（如 IndexedDB 的 put() 或 get()）。

• ❌ localStorage.SetItem('k', 'v') → 正确是 setItem()（小写 s）
• ❌ localStorage.getItem() 不带参数 → 必须提供 key，否则返回 null
• ❌ 直接存对象：localStorage.setItem('obj', {x: 1}) → 实际存入 "[object Object]"

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！