Entertainment at it's peak. The news is by your side.

How to use your URL as a shareable JSON database


Wish you had a mode to half details with your mates in a frontend-completely

Turns out you may be ready to! You may pronounce your details inner your URIs and then
replica/paste them to your mates. Or now not it’s that uncomplicated.

This challenge is a like a flash proof of conception whipped up in 30 minutes to
point out you straightforward methods to cease it.


  1. Kind details within the text field beneath.
  2. Click on “Save”.
  3. Copy + paste the URL to your mates.
  4. Your pals gather the identical details that you saved earlier.

Guidelines on how to build your beget

The recipe is colossal straightforward.

Characteristic to set up the records to the URL

In declare to set up details, all you wish to cease is stammer the next details.
Your details will possible be saved to your URL, and in addition you may be ready to replica/paste it to your

          feature set up(json={}) {
            // step 1, serialize the JSON to a string.
            const dataToSave = JSON.stringify(json); // stringify the json
            const obscene64 = btoa(dataToSave);         // obscene64 encode the records, for elegant applications
            const hash = encodeURIComponent(obscene64); // encode the string as a URI element

            // step 2, add the string to a param known as 'details-hash'
            const urlParams = new URLSearchParams(;
            urlParams.reputation("details-hash", hash);
   = urlParams;

Characteristic to load the records from the URL

Loading the records relieve is even simpler. You factual be taught the URL params and
decode the records.

          feature load() {
            // accept the records from the hash
            const urlParams = new URLSearchParams(;
            const hash = urlParams.accept("details-hash");

            // if there may be rarely any details, return empty object.
            if (!hash) {
              return {};
            // else decode and return the object
            const jsonString = atob(decodeURIComponent(hash));
            return JSON.parse(jsonString);

Regarding the author

Monarch Wadia is a senior developer, blueprint “architect”, and the CEO
& CTO at There, he
builds hackathons which advantage developers sharpen their talents. He
enjoys coding immensely.

You may join with Monarch on
LinkedIn or

Read More

Leave A Reply

Your email address will not be published.