localStorage算“离线可用”因其不依赖网络、重启断网后数据仍存在，但受限于同源隔离、仅支持字符串、容量有限（5–10 MB）、同步阻塞且不安全，适合存非敏感轻量状态如主题偏好，禁用于token、登录态等敏感或关键数据。
HTML 本身不支持离线存储，但浏览器提供的 localStorage API 可以在用户本地持久保存字符串数据，是实现简单离线能力最常用、最直接的方式。
为什么 localStorage 算“离线可用”？
它不依赖网络，数据写入后即使关闭浏览器、重启电脑、断网重开页面，只要没手动清除或超出配额，数据依然存在。但要注意：localStorage 是同源（协议+域名+端口）隔离的，http://a.com 写的数据，https://a.com 读不到；localhost:3000 和 localhost:8080 也互不可见。
- 只支持字符串 —— 存对象必须先
JSON.stringify()，取出来要JSON.parse() - 容量通常为 5–10 MB（各浏览器不同），超限会抛
QuotaExceededError - 同步阻塞操作，频繁读写大体积数据会影响主线程响应
- 不参与 HTTP 请求，服务端完全感知不到它的存在
localStorage.setItem() 和 localStorage.getItem() 怎么用才不出错？
这是最常误用的两个方法。典型错误包括：传入 undefined 或对象直接存、读取不存在的 key 返回 null 却当成空字符串处理、未做 try...catch 处理配额错误。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 存值前务必类型校验：
if (typeof value === 'string') localStorage.setItem('key', value)；存对象则：localStorage.setItem('user', JSON.stringify({name: 'Alice'})) - 取值后必须判空：
const raw = localStorage.getItem('user'); const user = raw ? JSON.parse(raw) : null; - 敏感操作建议包裹
try...catch，尤其在低配设备或旧版 Safari 上容易因配额不足失败 - 不要在
localStorage中存 token 等敏感凭证 —— XSS 攻击可直接读取
哪些场景适合用 localStorage？哪些坚决不能用？
它适合轻量、非关键、用户可接受丢失的本地状态缓存；不适合需要强一致性、服务端协同或安全要求高的场景。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理用途：表单草稿自动保存、UI 主题偏好（dark/light）、折叠面板展开状态、最近搜索关键词
- ❌ 绝对避免：登录态维持（应配合 HttpOnly Cookie + 后端 session）、订单暂存、加密密钥、未同步的业务核心数据
- ⚠️ 注意边界：PWA 中若需可靠离线资源缓存，应优先用
Cache API+Service Worker，而非把 HTML/JS 文件塞进localStorage
真正麻烦的不是怎么写那两行 setItem，而是想清楚「这个数据到底该不该放这儿」——很多 bug 都源于把临时状态当持久状态用，或者把客户端缓存当服务端权威数据源。
