創建一個沒有後端的短的可解密的URL

我正在創建一個沒有後端邏輯的前端React應用程序。在這個應用程序中，用戶可以將數據輸入到多個表單域。我希望允許用戶直接鏈接到應用程序，並根據存儲在URL中的數據填寫其字段。問題是，我不知道是否有一種方法可以單獨使用JavaScript生成漂亮的URL。創建一個沒有後端的短的可解密的URL

理想的情況下，我想最終結果是這個樣子：

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 情節每個診斷約10 和4個或5 程序。

如果我字符串化，然後編碼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

如果我進一步轉換th在進入使用btoa Base64的，我得到的東西看起來更像是一個縮短的URL，但要注意，這是與我上面提供的演示數據，這成爲太長：

的http：//例子.COM /#/.../ JTdCJTIyRXBpc29kZXMlMjI6JTVCJTdCJTIySWQlMjI6JTIyMSUyMiwlMjJBZ2UlMjI6JTIyMjUlMjIsJTIyU0VYJTIyOiUyMjElMjIsJTIyRGlhZ25vc2lzJTIyOiU1QiUyMjElMjIsJTIyMiUyMiwlMjIzJTIyLCUyMjQlMjIsJTIyNSUyMiwlMjI2JTIyLCUyMjclMjIsJTIyOCUyMiwlMjI5JTIyLCUyMjEwJTIyJTVELCUyMlByb2NlZHVyZSUyMjolNUIlMjIxJTIyLCUyMjIlMjIsJTIyMyUyMiwlMjI0JTIyLCUyMjUlMjIsJTIyNiUyMiwlMjI3JTIyLCUyMjglMjIsJTIyOSUyMiwlMjIxMCUyMiU1RCU3RCU1RCU3RA ==

有沒有一種更好的方式我可以將很多信息壓縮成一個相對較小的字符串，它很適合URL，而不需要任何後端邏輯？

理想情況下，我想要一個本地JavaScript解決方案，但我很欣賞這可能是不可能的。

來源

2016-11-14 James Donnelly

你想要一個長字符串以短字符串表示。你要求的是*壓縮*，而不是「編碼」或「加密」。您想嘗試查找平均壓縮數據的壓縮算法，但仍只使用URL安全字符。這可能不存在。您可以試着想出自己的序列化語法，它比JSON更緊湊地表達數據，特別是考慮URL安全字符。也許[Rison]（https://github.com/Nanonid/rison）就是你要找的。 – deceze

你可以用Base64編碼開始，然後回來，如果你有這種方法的問題？ –

@TomaszKowalczyk我不確定這是否會有所幫助。例如，在Base64中的「Episode」變爲「RXBpc29kZQ ==」，它長5個字符。 –

數據結構有多統一？

我可以看到，您在上面給出的例子：

{ 
    "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個字符。

來源

2016-11-14 13:00:52 Rounin

創建一個沒有後端的短的可解密的URL

回答

相關問題