Question

我正在创建一个没有后端逻辑的前端React应用程序。在此应用程序中，用户可以将数据输入到多个表单域中。我希望允许用户根据存储在URL中的数据直接链接到应用程序，并填写其字段。问题是，我不知道是否有单独用JavaScript生成漂亮网址的方法。

理想情况下，我希望最终结果看起来像这样：

http://example.com/#/.../sdf098sdfipodfi0sf3j

...当用户加载该URL时，它应解密字符串并恢复保存的数据（Codepen和JSFiddle等资源如何允许直接链接到结果，但没有后端或数据库）。

以下是我拥有的数据示例：

{
    "Episodes": [
        {
            "Id":"1",
            "Age":"25",
            "SEX":"1",
            "Diagnosis":["1","2","3","4","5","6","7","8","9","10"],
            "Procedure":["1","2","3","4","5","6","7","8","9","10"]
        }
    ]
}

我遇到的问题是可以：

最多250个剧集。
每个
中最多999 诊断和程序。

上述要求绝对是极端的，并且大多数情况下可能只有大约5或6个剧集，每个 >程序

如果我对JSON对象进行字符串化然后对其进行编码并将其粘贴在URL中，那么我最终会得到一个带有%符号的令人难以置信的丑陋输出：

http://example.com/#/.../%7B%22Episodes%22:%5B%7B%22Id%22:%221%22,%22Age%22:%2225%22,%22SEX ％22：％221％22％22Diagnosis％22：％5B％221％22％222％22％223％22％224％22％225％22％226％22％227％22，％228％22％229％22％2210％22％5D，％22Procedure％22：％5B％221％22％222％22％223％22％224％22％225％22％ 226％22，227％22％，％228％22％229％22％2210％22％5D％7D％5D％7D

如果我进一步使用btoa将其转换为Base64，我会得到一些看起来更像缩短网址的内容，但请记住这是我上面提供的演示数据，这就变成了太长了：

http://example.com/#/.../JTdCJTIyRXBpc29kZXMlMjI6JTVCJTdCJTIySWQlMjI6JTIyMSUyMiwlMjJBZ2UlMjI6JTIyMjUlMjIsJTIyU0VYJTIyOiUyMjElMjIsJTIyRGlhZ25vc2lzJTIyOiU1QiUyMjElMjIsJTIyMiUyMiwlMjIzJTIyLCUyMjQlMjIsJTIyNSUyMiwlMjI2JTIyLCUyMjclMjIsJTIyOCUyMiwlMjI5JTIyLCUyMjEwJTIyJTVELCUyMlByb2NlZHVyZSUyMjolNUIlMjIxJTIyLCUyMjIlMjIsJTIyMyUyMiwlMjI0JTIyLCUyMjUlMjIsJTIyNiUyMiwlMjI3JTIyLCUyMjglMjIsJTIyOSUyMiwlMjIxMCUyMiU1RCU3RCU1RCU3RA==

有没有更好的方法可以将大量信息压缩成一个相对较小的字符串，这个字符串很适合URL，没有任何后端逻辑？

理想情况下，我想要一个本机JavaScript解决方案，但我很欣赏这可能是不可能的。

Answer 1

数据结构的统一程度如何？

我可以通过上面给出的例子看到：

{
    "Episodes": [
        {
            "Id":"1",
            "Age":"25",
            "SEX":"1",
            "Diagnosis":["1","2","3","4","5","6","7","8","9","10"],
            "Procedure":["1","2","3","4","5","6","7","8","9","10"]
        }
    ]
}

你可以用以下方法重建：

http://example.com/#/.../E1I1A25S1D10P10

但这仍然是1集的15个字符的短代码...所以如果有6集，那么会增加到大约90个字符。

创建一个没有后端的简短，可解密的URL

1 个答案: