html5的本地存储localStorage怎么用_html4存数据靠啥【教程】

星夢妙者 2026-01-01 00:00:00 次阅读

localStorage是浏览器原生提供的持久化键值对存储对象，HTML4无等价机制，仅依赖受限极多的document.cookie；操作需用setItem/getItem等方法，存对象须JSON序列化，且受协议、配额、跨域等策略限制。

localStorage 是什么，和 HTML4 有什么根本区别

localStorage 不是 HTML5 新增的“存储格式”，而是浏览器原生提供的 Window 接口下的一个持久化键值对存储对象。HTML4 根本没有等价机制——它不支持任何客户端本地持久存储，所谓“HTML4 存数据”，实际靠的是 document.cookie，而且受限极多：最大 4KB、每次 HTTP 请求自动携带、无结构、需手动编码/解码、有效期难控。

怎么安全地写入和读取 localStorage

所有操作都通过 localStorage 对象的四个核心方法完成，注意它只接受字符串作为值：

localStorage.setItem(key, value)：必须两个参数都是字符串；传对象会自动调用 .toString()，结果通常是 [object Object]
localStorage.getItem(key)：返回字符串或 null（不是 undefined），查不到就别想默认值
localStorage.removeItem(key)：删单个键，不会报错，哪怕 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 存业务数据