バックエンドのない短い解読可能URLの作成

Question

バックエンドロジックを持たないフロントエンドのReactアプリケーションを作成しています。このアプリケーションでは、ユーザーは複数のフォームフィールドにデータを入力できます。私は、ユーザーがURLに格納されたデータに基づいてフィールドを埋め込んで、アプリケーションに直接リンクできるようにしたいと考えています。問題は、JavaScriptだけで見栄えの良いURLを生成する方法があるかどうかわかりません。とき...

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

：

理想的には私はこのような何かを見て最終結果を望みますよユーザーはそのURLを読み込み、文字列を復号化して保存したデータ（CodepenやJSFiddleなどのリソースがバックエンドやデータベースなしで直接結果にリンクする方法）を復元する必要があります。ここで

は、私が持っているデータの例です：

1. 250のエピソードまで：私がいる

   { 
       "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"] 
        } 
       ] 
   } 
   

   あり問題ができることです。

2. まで999 診断および手順。

上記の要件は、絶対的な極値であり、大部分はおそらくしか約10 診断し及び4又は5 プロシージャで約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 22％22％22％22％22％22％22％22％229％22％22％22％22％22％22％22％22％ 22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％22％ 22％229％22％2210％22％5D％7D％5D％7D

さらに進んでbtoaを使用してBase64で中で、私はもっと短縮URLのように見えますが、念頭にすると、これは私が上で提供したデモデータである何かを得る、これはあまりにも長くなる：

ます。http：//例.COM /#/.../ JTdCJTIyRXBpc29kZXMlMjI6JTVCJTdCJTIySWQlMjI6JTIyMSUyMiwlMjJBZ2UlMjI6JTIyMjUlMjIsJTIyU0VYJTIyOiUyMjElMjIsJTIyRGlhZ25vc2lzJTIyOiU1QiUyMjElMjIsJTIyMiUyMiwlMjIzJTIyLCUyMjQlMjIsJTIyNSUyMiwlMjI2JTIyLCUyMjclMjIsJTIyOCUyMiwlMjI5JTIyLCUyMjEwJTI​​yJTVELCUyMlByb2NlZHVyZSUyMjolNUIlMjIxJTIyLCUyMjIlMjIsJTIyMyUyMiwlMjI0JTIyLCUyMjUlMjIsJTIyNiUyMiwlMjI3JTIyLCUyMjglMjIsJTIyOSUyMiwlMjIxMCUyMiU1RCU3RCU1RCU3RA ==

よりよい方法はありますバックエンドロジックなしで、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文字に増加します。