web-applications - 解决 "save"简单 Web 应用程序状态以解决栏/无后端问题的最有效方法

Question

有一类简单的网络应用程序可以将您的工作“保存”到地址栏中，而无需在后端存储任何内容。两个例子:

TypeScript Playground

WebSequenceDiagrams.com

此功能的正确名称是什么？

最有效的方法是什么？ TypeScript Playground 实际上将代码复制到地址栏中，但这不是很有效。压缩数据怎么样？

EDIT1:我的数据采用 JSON 格式。

编辑2:我认为我的问题归结为什么样的压缩可以输出URL安全字符。

EDIT3:“保存”到 URL 而不是本地存储的要点是用户可以复制/粘贴状态。想想将 TypeScript Playground 剪下来复制到 SO 答案。

感谢您的帮助!

Answer 1

我认为你可以首先使用 http://pieroxy.net/blog/pages/lz-string/index.html 压缩 JSON 字符串然后使用内置的encodeURIComponent()函数对压缩字符串进行编码。

下载库并指定它，

<script language="javascript" src="lz-string.js"></script>

压缩和编码您的数据，

var string = JSON.stringify({attr: "This is my compression test."});
alert("Size of sample is: " + string.length);

var compressed = LZString.compress(string);
alert("Size of compressed sample is: " + compressed.length);

var getParam = encodeURIComponent(compressed);

解码时，先使用decodeURIComponent()解码，然后使用LZString.decompress(compressed)解压。