本文介绍如何通过客户端轻量级方案（如 base64 + lzutf8 压缩）将大型 json 对象编码为短小、可读性低且抗窥探的 url 查询参数，兼顾压缩率与实现简易性，无需服务端参与。
本文介绍如何通过客户端轻量级方案（如 base64 + lzutf8 压缩）将大型 json 对象编码为短小、可读性低且抗窥探的 url 查询参数，兼顾压缩率与实现简易性，无需服务端参与。
在构建可分享链接（如 mysite.com?share={...}）时，直接将原始 JSON 作为查询参数存在三大问题：暴露内部状态、URL 过长（易超浏览器限制，如 2048–8192 字符）、不便于传播与存储。Base64 编码虽简单，但不压缩，反而因编码膨胀使长度增加约 33%；而传统加密（如 AES）虽安全，却会显著增大输出（尤其加盐、IV、认证标签等开销），违背“缩短 URL”的核心目标。
✅ 推荐方案：客户端无依赖压缩 + 安全编码
最佳实践是采用 LZ-based 压缩 + Base64URL 安全编码，而非简单移位（如 Caesar Cipher）或强加密。原因如下：
- Caesar Cipher 仅做字符偏移，无压缩能力，且对 JSON 中大量引号、冒号、数字完全无效，实际长度几乎不变；
- Crypto-js 等加密库需密钥管理，且加密后数据仍需 Base64 编码，体积通常比原文大 20%~50%，与压缩目标背道而驰；
- 真正有效的路径是：压缩 → 二进制转安全字符串。
? 实现步骤（纯前端，零依赖）：
-
安装压缩库（推荐轻量、UTF-8 友好的 lzutf8）：
npm install lzutf8 # 或通过 CDN 引入
-
压缩并编码（生成分享链接）：
import { compress, decompress } from 'lzutf8'; function jsonToShareParam(jsonObj) { const jsonString = JSON.stringify(jsonObj); const compressed = compress(jsonString); // 返回 Uint8Array return btoa(String.fromCharCode(...compressed)) // Base64 编码（兼容旧环境） .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, ''); // 转为 URL-safe Base64 } // 示例 const shareParam = jsonToShareParam({ foo: 1, bar: 2, items: Array(100).fill('x') }); console.log(`https://mysite.com?share=${shareParam}`); -
解码并解压（页面加载时）：
function shareParamToJson(shareValue) { try { const padded = shareValue + '='.repeat((4 - shareValue.length % 4) % 4); const decoded = atob(padded.replace(/-/g, '+').replace(/_/g, '/')); const bytes = new Uint8Array(decoded.length); for (let i = 0; i
⚠️ 注意事项：
- 不要使用 btoa/atob 处理非 ASCII 字符？ —— lzutf8 输出为二进制安全字节流，btoa 在此场景下完全适用（因输入已是 Uint8Array 转换的 ASCII 字符串）；
- 兼容性：现代浏览器均支持；若需 IE11 支持，可用 lzutf8 内置的 encodeBase64 / decodeBase64 方法替代 btoa/atob；
- 安全性边界：该方案不提供加密强度，目标是“防 casual inspection”（防止普通用户一眼看懂），而非抵御主动逆向。如需保密，请结合服务端短期 Token（如生成 share_id=abc123，服务端查表映射真实 JSON）；
- 长度实测效果：典型配置对象（~2KB JSON）经 LZUTF8 压缩 + Base64URL 后，通常缩减至原长的 40%~60%，远优于纯 Base64 的 133%。
? 总结：
用 lzutf8 替代 Caesar Cipher 或 Crypto-js，是平衡压缩率、客户端简洁性、URL 可靠性的最优解。它让分享链接真正“短、快、隐”，同时保持 100% 前端可控——无需 Node.js 服务端介入，也无需用户安装额外工具。
