localStorage 数据结构的优化：使用压缩算法存储数据-H5教程-PHP中文网

localstorage存对象需先json.stringify再lzstring.compresstoutf16压缩，读取时逆序解压解析；必须try-catch处理quotaexceedederror和null解压异常，并配合分片、结构化存储提升效率。

localstorage 数据结构的优化：使用压缩算法存储数据

直接用 localStorage 存对象或长文本，很容易触达 5MB 上限，尤其在任务类、笔记类或低代码应用中。真正有效的扩容方式不是“换存储”，而是“压数据”——用压缩算法把内容变小，再存进去。关键不在压缩本身，而在压缩前后数据形态的正确处理。

先序列化，再压缩，顺序不能错

localStorage 只认字符串，任何对象、数组都必须先转成 JSON 字符串，才能交给压缩函数。反过来看，解压后得到的仍是字符串，必须再用 JSON.parse() 恢复结构。

❌ 错误： LZString.compress({ name: '张三', age: 28 }) —— 压缩函数不识别 JS 对象
✅ 正确： const compressed = LZString.compressToUTF16(JSON.stringify(userData))
读取时也严格逆序：JSON.parse(LZString.decompressFromUTF16(raw))

选对压缩方法，兼顾兼容与体积

LZ-String 提供多种输出格式，compressToUTF16 和 decompressFromUTF16 是推荐组合：生成的字符串仍是合法 JS 字符串，可直接存入 localStorage，无需 Base64 或额外转义；相比 compressToBase64，它在多数场景下压缩率更优，且浏览器解析更快。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

避免用 compress/decompress（原始二进制格式），它返回非字符串类型，localStorage.setItem 会静默转成 [object Object]
UTF16 版本天然支持中文、emoji 等宽字符，无乱码风险

必须加 try-catch，否则失败无声无息

压缩过程本身几乎不会报错，但两个环节极易出问题：一是 localStorage.setItem 超限时抛 QuotaExceededError；二是解压时输入损坏或为空，LZString.decompressFromUTF16 直接返回 null，后续 JSON.parse(null) 报错。

写入时包裹： try { localStorage.setItem('key', compressed); } catch (e) { console.warn('存储失败：', e.message); }
读取时判空： const raw = localStorage.getItem('key'); const json = raw ? LZString.decompressFromUTF16(raw) : null; return json ? JSON.parse(json) : null;