如何利用 LZ-String 算法为前端本地存储进行数据压缩-js教程-PHP中文网

lz-string 的 compresstoutf16/decompressfromutf16 可高效压缩结构化文本，压缩率40%–60%，兼容unicode，避免base64膨胀；需封装存取函数、预判长度、处理json异常与解压失败，并结合脱敏、过期清理和双写校验提升可靠性。

如何利用 lz-string 算法为前端本地存储进行数据压缩

直接用 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 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载