localStorage是浏览器原生提供的持久化键值对存储对象，HTML4无等价机制，仅依赖受限极多的document.cookie；操作需用setItem/getItem等方法，存对象须JSON序列化，且受协议、配额、跨域等策略限制。
localStorage 是什么，和 HTML4 有什么根本区别
localStorage 不是 HTML5 新增的“存储格式”，而是浏览器原生提供的 Window 接口下的一个持久化键值对存储对象。HTML4 根本没有等价机制——它不支持任何客户端本地持久存储，所谓“HTML4 存数据”，实际靠的是 document.cookie，而且受限极多：最大 4KB、每次 HTTP 请求自动携带、无结构、需手动编码/解码、有效期难控。
怎么安全地写入和读取 localStorage
所有操作都通过 localStorage 对象的四个核心方法完成，注意它只接受字符串作为值：
-
localStorage.setItem(<strong>key</strong>, <strong>value</strong>)：必须两个参数都是字符串；传对象会自动调用.toString()，结果通常是[object Object] -
localStorage.getItem(<strong>key</strong>)：返回字符串或null（不是undefined），查不到就别想默认值 -
localStorage.removeItem(<strong>key</strong>)：删单个键，不会报错，哪怕 key 不存在 -
localStorage.clear()：清空当前域名下所有 localStorage 数据，慎用
存对象要手动序列化：
const user = { name: "Alice", age: 28 };
localStorage.setItem("user", JSON.stringify(user));
// 读取后必须解析
const saved = JSON.parse(localStorage.getItem("user"));
常见踩坑：为什么 setItem 没反应，或 getItem 返回 null
这些不是 bug，而是受制于浏览器策略和使用方式：
立即学习“前端免费学习笔记（深入）”；
- 在非
http://localhost或https://协议下（比如直接双击打开file://页面），localStorage会被禁用，控制台报SecurityError - 超过浏览器配额（通常 5–10MB）时，
setItem会抛出QuotaExceededError，必须用try/catch捕获 -
跨域隔离：不同子域名（
a.example.com和b.example.com）之间 localStorage 完全不共享 - 私密模式（如 Chrome Incognito）下，关闭窗口即清空，且部分浏览器会直接禁用
localStorage 和 sessionStorage、cookie 的关键分界点
别只盯着“能存”，得看场景是否匹配：
-
localStorage：适合长期缓存用户偏好、UI 状态、离线内容快照；关闭标签页不丢失，但不会自动同步到服务端 -
sessionStorage：仅当前标签页有效，关页即毁；适合临时表单草稿、导航状态，和 localStorage API 完全一致，只是生命周期不同 -
document.cookie：唯一能被服务端读取的前端存储（HTTP 请求自动带），但体积小、无加密、易被 XSS 盗取；现代项目应尽量避免手动操作 cookie 存业务数据
真正复杂的不是怎么写，而是什么时候不该写——比如敏感 token、未加密的用户身份信息，哪怕存在 localStorage 里，也等于裸奔。
