LZ-String 的 compressToUTF16/decompressFromUTF16 可高效压缩结构化文本，压缩率40%–60%，兼容Unicode，避免Base64膨胀；需封装存取函数、预判长度、处理JSON异常与解压失败，并结合脱敏、过期清理和双写校验提升可靠性。
直接用 LZ-String 压缩数据再存进 localStorage，能有效突破 5MB 容量限制，实测压缩率常达 40%–60%，特别适合存 JSON 配置、用户行为日志、表单草稿等结构化文本。
选对压缩方法：UTF16 编码最稳妥
中文、emoji、特殊符号多的场景，优先用 compressToUTF16 和 decompressFromUTF16。它原生兼容 JavaScript 字符串内部表示，不引入编码转换错误，也不像 Base64 那样增加体积（Base64 会膨胀约 33%）。
- 压缩后仍是字符串，可直接
setItem - 解压时无需额外解码步骤，稳定性高
- 比默认
compress更适合含 Unicode 的真实业务数据
封装存取逻辑：避免每次手写重复代码
把压缩/解压逻辑收进两个函数，后续调用就像操作普通 localStorage 一样自然：
import { compressToUTF16, decompressFromUTF16 } from 'lz-string';
export function setCompressed(key, data) {
const str = typeof data === 'string' ? data : JSON.stringify(data);
localStorage.setItem(key, compressToUTF16(str));
}
export function getCompressed(key) {
const compressed = localStorage.getItem(key);
if (!compressed) return null;
try {
return JSON.parse(decompressFromUTF16(compressed));
} catch (e) {
console.warn('LZ 解压失败，可能数据损坏', e);
return null;
}
}
这样写好之后，存一个大型配置对象就只需：setCompressed('userPrefs', { theme: 'dark', layout: 'grid', ... });
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
注意边界情况：大小判断和降级处理
压缩不是万能的——极短字符串（如 "a"、"123"）压缩后反而更大，且空值、undefined、非字符串输入会出错。
- 建议对原始字符串长度做预判：小于 50 字符可跳过压缩
-
JSON.stringify失败时（比如循环引用对象），提前捕获并报错提示 - 解压失败时不要静默返回 undefined，最好配合 fallback 机制或清除异常 key
配合其他策略效果更佳
单靠压缩还不够，建议组合使用：
- 敏感数据先脱敏再压缩（如隐藏手机号中间四位）
- 长期不用的数据加时间戳，定期清理过期项
- 关键数据可双写：一份压缩存 localStorage，一份轻量摘要存 IndexedDB 作校验
不复杂但容易忽略。
