HTML支持离线存储吗_localStorage基本用法【说明】-html教程-PHP中文网

localstorage算“离线可用”因其不依赖网络、重启断网后数据仍存在，但受限于同源隔离、仅支持字符串、容量有限（5–10 mb）、同步阻塞且不安全，适合存非敏感轻量状态如主题偏好，禁用于token、登录态等敏感或关键数据。

html支持离线存储吗_localstorage基本用法【说明】

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 处理配额错误。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

存值前务必类型校验：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 都源于把临时状态当持久状态用，或者把客户端缓存当服务端权威数据源。