CODEWITHSUNDEEP
javascript
James Donnelly
James Donnelly

Reputation: 128791

Creating a short, decryptable URL with no back end

I'm creating a front-end React application which has no back-end logic. In this application, users can enter data into multiple form fields. I'm wanting to allow users to link directly to the application with their fields filled in based on data stored in the URL. The problem is, I don't know if there's a way of generating a nice looking URL with JavaScript alone.

Ideally I'm wanting the end-result to look something like this:

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

...when the user loads up that URL, it should decrypt the string and restore the saved data (how resources like Codepen and JSFiddle allow linking directly to results, but without a back-end or database).

Here's an example of the data I have:

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

There problem I'm having is that there can be:

  1. Up to 250 Episodes.
  2. Up to 999 Diagnoses and Procedures within each.

The above requirements are absolute extremes and for the most part there will probably only ever be around 5 or 6 Episodes each with around 10 Diagnoses and 4 or 5 Procedures.

If I stringify and then encode the JSON object and stick that in the URL, I'll end up with an incredibly ugly output riddled with % symbols:

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

If I go further and convert that into Base64 using btoa, I get something which looks more like a shortened URL, but bearing in mind this is with the demo data I've provided above, this becomes way too long:

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

Is there a nicer way I can condense a lot of information into a relatively small string which would fit nicely in a URL, without any back-end logic?

Ideally I'm wanting a native JavaScript solution, but I appreciate that may not be possible.

Upvotes: 1

Views: 106

Answers (1)

Rounin
Rounin

Reputation: 29463

How uniform is the data structure?

I can see that with the example you've given above:

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

You could reconstruct that with:

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

But that's still a 15-character shortcode for 1 episode... so if there were 6 episodes, that would increase to around 90 characters.

Upvotes: 1

Related Questions