Skip to content

Instantly share code, notes, and snippets.

@amit08255
Created February 23, 2023 18:03
Show Gist options
  • Save amit08255/55972a82c86768255c2cff00b32e0026 to your computer and use it in GitHub Desktop.
Save amit08255/55972a82c86768255c2cff00b32e0026 to your computer and use it in GitHub Desktop.
How to store your app's entire state in the url

How to store your app's entire state in the url

I decied to encode the entire application state as a Base64 encoded string in the hashmark of the url. For example, a url would look like (note its truncated since they are very long):

knotend.com/g/a#N4IgzgpgTglghgGxgLwnARgiAxA9lAWxAC5QA7X...

Everything after the /g/a# is a stringified version of a json object that contains all the information about the flowchart. It gets stringified, then compressed, then Base64 encoded. I update the url on every graph edit, so copying the graph state is as simple as copying the url in your browser bar.

Here's the pseudo code for creating the url, and then later reading it:

const stateString = JSON.stringify(appState); // appState is a json object
const compressed = compress(stateString);
const encoded = Base64.encode(compressed);
// Push that `encoded` string to the url
// ... Later, on page load or on undo/redo we read the url and
// do the following
const decoded = Base64.decode(encoded); // same encoded as above, but read from url
const uncompressed = uncompress(decoded);
const newState = JSON.parse(uncompressed);
// Now load your application with the newState
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment