本文介绍如何通过客户端轻量级方案对 json 字符串进行压缩与简单混淆，显著缩短 url 长度，同时避免明文暴露页面状态；重点推荐 base64 + lzutf8 压缩组合，并指出 caesar 密码等简易混淆的适用边界与局限性。
本文介绍如何通过客户端轻量级方案对 json 字符串进行压缩与简单混淆，显著缩短 url 长度，同时避免明文暴露页面状态；重点推荐 base64 + lzutf8 压缩组合，并指出 caesar 密码等简易混淆的适用边界与局限性。
在构建可分享链接（如 mysite.com?share={"foo":1,"bar":2}）时，直接序列化大型 JSON 对象会导致 URL 超长（常超 2000+ 字符），不仅影响可读性、兼容性（部分浏览器/代理截断 URL），更会暴露敏感前端状态。单纯 Base64 编码无法压缩，反而因编码膨胀使长度增加约 33%；而强加密（如 AES）虽安全，但密文通常比原文更长，且需密钥管理，违背“轻量客户端优先”原则。
✅ 推荐方案：LZUTF8 压缩 + Base64 编码（纯前端、无依赖、高效）
LZUTF8 是专为 UTF-8 字符串优化的轻量压缩库（仅 ~3.5KB gzipped），支持浏览器端直接压缩/解压 JSON 字符串，再经 Base64 编码生成紧凑 URL 参数：
<!-- 在 HTML 中引入 --> <script src="https://unpkg.com/lzutf8@0.8.0/lib/lzutf8.min.js"></script>
// 压缩并编码（生成短 URL）
function encodeShareData(obj) {
const json = JSON.stringify(obj);
const compressed = LZUTF8.compress(json); // 二进制 Uint8Array
return btoa(String.fromCharCode(...compressed)); // Base64 编码为字符串
}
// 解码并解压（页面加载时）
function decodeShareData(encoded) {
const bytes = new Uint8Array(
atob(encoded).split('').map(c => c.charCodeAt(0))
);
const json = LZUTF8.decompress(bytes);
return JSON.parse(json);
}
// 示例
const state = { foo: 1, bar: 2, config: Array(100).fill('x') };
const shortUrlParam = encodeShareData(state);
console.log(`?share=${shortUrlParam}`); // URL 参数长度通常降低 50%~70%
⚠️ 为什么不推荐 Caesar 密码等简易混淆？
如答案中提供的 Caesar 实现，本质是字符位移，不改变数据长度，且无压缩效果——它仅对 ASCII 字母移位，对 JSON 中大量 {, }, :, ,, 数字、引号等字符完全无效，实际压缩率 ≈ 0%，URL 长度几乎不变。更严重的是：该方法未处理 URL 安全字符（如 /, ?, &, =），直接拼接将破坏 URL 结构；且 btoa() 不支持 Unicode，对中文或特殊符号会报错。
? 进阶建议（Node.js 服务端协同）
若需更高压缩率或统一管理，可在 Node.js 后端提供短链服务：客户端上传 JSON → 服务端压缩 + 加盐哈希生成唯一 ID → 返回 mysite.com/s/abc123。但此方案增加请求往返，失去纯静态分享的即时性。
? 关键注意事项
- 所有客户端方案均不提供真正加密安全性：熟练用户仍可逆向还原（LZUTF8 可解压，Base64 可解码）。若需防窥探，请改用服务端 AES 加密 + 短链映射；
- 始终对编码后字符串做 encodeURIComponent() 再拼入 URL，防止特殊字符破坏路由；
- 测试目标浏览器 URL 长度限制（建议控制在 2000 字符内以保障兼容性）；
- 生产环境务必添加压缩失败兜底逻辑（如降级为原始 JSON + encodeURIComponent）。
综上，LZUTF8 + Base64 是平衡压缩率、客户端简洁性与兼容性的最优解——无需服务端参与、体积小、API 直观，可将典型配置 JSON 的 URL 长度压缩至原长度的 30%~50%，彻底解决超长链接痛点。
