如何利用HTML的localStorage实现简单键值对的浏览器持久化存储-html教程-PHP中文网

localStorage只能存字符串，对象需JSON.stringify()序列化，读取时用JSON.parse()并加空值兜底防报错，键名须加前缀避免冲突，多标签页需监听storage事件手动同步。

如何利用html的localstorage实现简单键值对的浏览器持久化存储

能直接用，但必须处理好字符串限制和解析异常——localStorage 只存字符串，对象不序列化会变成 [object Object]，读取时 JSON.parse() 遇到空值或损坏数据会报错中断脚本。

为什么 setItem('key', obj) 存进去是 "[object Object]"

localStorage.setItem() 的第二个参数会被强制转成字符串，对象调用 toString() 就是 [object Object]。这不是 bug，是设计使然。

必须显式序列化：

存对象前用 JSON.stringify(obj)
读取后用 JSON.parse(localStorage.getItem('key') || '{}')，加默认空对象兜底
避免直接写 localStorage.myKey = obj，它等价于 setItem()，同样会隐式转字符串

getItem() 返回 null 时直接 JSON.parse() 会崩溃

比如键不存在、用户清过缓存、或之前存了非法 JSON（如手动在 DevTools 里改坏了），JSON.parse(null) 抛 SyntaxError。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

安全读取模式：

始终用 localStorage.getItem('key') || '{}' 提供 fallback 字符串

或封装一层：

function getJson(key, fallback = {}) {
  try {
    return JSON.parse(localStorage.getItem(key) || JSON.stringify(fallback));
  } catch (e) {
    return fallback;
  }
}

不要依赖 localStorage.key !== undefined 判断存在性——undefined 和 null 行为不一致，统一用 getItem() 返回值判断

localStorage.setItem() 覆盖逻辑与 key 冲突风险

同名 key 总是覆盖，没有“仅新增”原语。容易在多模块协作时互相踩：

避免通用键名如 'config'、'data'，加前缀： 'myapp-user-preferences'
如果多个功能都写 'shortcuts'，后写的会干掉前写的——建议按功能域拆分键，如 'editor-shortcuts'、'nav-shortcuts'
修改值前可先读一次做 diff，但注意这不解决并发写问题（LocalStorage 无事务）

真正麻烦的不是存和取，而是当用户在多个标签页间切换时，storage 事件不会触发当前页面自身的变化；得靠监听 + 手动同步，这点常被忽略。