通过 URL 分享你的 Web 应用状态 — 无需后端

Source: Dev.to

问题

你正在构建一个纯客户端工具。用户会配置设置、输入数据、微调选项。随后他们想把自己的完整配置分享给同事。

传统方案：数据库 + 用户账户 + 分享接口。这意味着为一个功能就要搭建完整的后端。

解决方案：URL 状态编码

function shareURL() {
  // Collect current state
  const state = {
    groups: getKeywordGroups(),
    match: currentMatchType,
    separator: document.getElementById("separator").value
  };

  // Encode as base64 URL parameter
  const encoded = btoa(JSON.stringify(state));
  const url = `${location.origin}${location.pathname}?q=${encoded}`;

  navigator.clipboard.writeText(url).then(() => {
    showToast("Shareable link copied!");
  });
}

页面加载时，检查参数并恢复：

const params = new URLSearchParams(location.search);
const shared = params.get("q");

if (shared) {
  try {
    const state = JSON.parse(atob(shared));
    restoreState(state);
  } catch (e) {
    loadDefaults();
  }
}

就是这么简单。约 20 行代码。无需服务器、数据库、认证。

为什么它很好用

• 零基础设施 — URL 本身就是存储
• 即时分享 — 复制链接 → 粘贴 → 完成
• 可书签 — 用户可以保存特定配置
• 易调试 — 支持工单中直接包含完整状态
• 离线友好 — 不依赖任何网络

注意事项

• URL 长度限制 — 大多数浏览器能处理 2,000+ 字符，但请保持状态紧凑。
• Base64 膨胀 — JSON + base64 会增加约 33 % 的开销。对于大型状态，可考虑使用 pako（gzip）。
• 破坏性更改 — 为状态格式加版本号或提供回退解析。
• 敏感数据 — Base64 只是编码，不是加密。不要在 URL 中放置机密信息。

添加持久化预设（进阶）

将 URL 分享与 localStorage 预设结合，满足高级用户需求：

function savePreset(name) {
  const presets = JSON.parse(localStorage.getItem("presets") || "{}");
  presets[name] = getCurrentState();
  localStorage.setItem("presets", JSON.stringify(presets));
}

function loadPreset(name) {
  const presets = JSON.parse(localStorage.getItem("presets") || "{}");
  if (presets[name]) restoreState(presets[name]);
}

现在用户可以：

• 保存 本地配置（页面刷新后仍然存在）
• 分享 配置 via URL（跨设备使用）
• 加载 已保存的配置，瞬间恢复

全部无需一次 API 调用。

实际案例

我在 Keyword Mixer 中使用了这种模式——一个 PPC 关键字组合工具。用户设置关键字组、匹配类型和否定关键字后，可以通过单个 URL 与团队共享完整配置。

?q= 参数承载所有信息。点击共享链接 → 工具打开并加载相同配置 → 立即生成组合。

何时使用

• ✅ 配置繁重的工具（设置、过滤器、预设）

• ✅ 小到中等规模的状态（< 1 KB JSON）

• ✅ 需要分享 = 协作的工具

• ❌ 大数据集（使用 IndexedDB + 导出）

• ❌ 敏感数据（使用加密或服务器端存储）

• ❌ 状态频繁变化（使用 WebSocket 或 SSE）

这种 “URL 即数据库” 的模式是我探索的众多零后端技术之一。如果你对构建纯浏览器工具感兴趣，可以看看 DonFlow —— 一个使用 IndexedDB 完全离线的预算跟踪器，零网络请求。