This has taken off in the Vue community w/ https://sfc.vuejs.org/ and https://uno.antfu.me/play/ and they use the fragment so it doesn't get sent to the HTTP server
How to store your app's entire state in the url
11–20 of 416 posts
Re: How to store your app's entire state in the url
#12As usual when I see this sort of thing, I have questions around the security needs of the application. Storing all of this information on the client means that the client has to be trusted to not mess with all of this state. If it's important, it needs to be stored and checked server-side.
Re: How to store your app's entire state in the url
#13I tried to do that at first with https://textshader.com because the whole site is client-side and I didn't want to bother with a backend. It didn't really work because the state is unbounded in size, so instead I just chuck it on GitHub gists and then point to the gists. It means I don't have to store any data myself and there's zero recurring costs outside of the domain name... but if the site ever got popular I'd probably have to figure something else out.
Re: How to store your app's entire state in the url
#14A better idea is to use the URI fragment (the string after the # sign). It has the advantage of not having a size limit, and not needing to be sent all to the backend during the request. `window.location.hash` is your friend.
That's really interesting. Do you have any idea how much data (i.e. max amount of json) you can store using something like that?
It seems to vary greatly by browser. Based on this SO answer [1] MS edge only supported 2000 characters in 2017, while Chrome currently handles 40 million characters (of compressed, encoded json).
Re: How to store your app's entire state in the url
#15A better idea is to use the URI fragment (the string after the # sign). It has the advantage of not having a size limit, and not needing to be sent all to the backend during the request. `window.location.hash` is your friend.
https://app.diagrams.net/ has an excellent example of this. File > Export As > URL...
Re: How to store your app's entire state in the url
#16This is pretty common and has a bunch of advantages, like the fact you can link to and bookmark a particular state.
Also, if you are careful you get undo and redo for free with the browser's back button doing all the work for you.
The disadvantages are that your representation of internal state becomes part of the interface - if you ever change your app you need to deal with versioning the state so your new version can transparently handle the old state format.
If your app has a server component that acts on this state, be super careful about acting on it and treat it as you would any other input under user control.
If you app is completely client side, consider storing the state in the #fragment section of the URL. This never gets sent to the server. An example from my own site [0] - see how the fragment part of the URL changes as you select different topics.
There are also limits on just how much you can cram into a URL but with care you can shove a lot of state.
Re: How to store your app's entire state in the url
#17Hah, I came up with the same thing for https://fivethreeone.app/calculator .
The reason I did the compression (using pako as well) was that without it the URL was too long to show a preview on iMessage. I also compress the state manually myself which saved a bunch of bytes too.
Re: How to store your app's entire state in the url
#18Hey all, I made this post to show a technique that I'm using in my keyboard-centric flowchart editor [0]. I really love urls, and the power that they hold, and would love to see more apps implement little hacks like this. Also, another shout out to mermaidjs and flowchart.fun for also implementing similar url-based sharing. [0] https://www.knotend.com
There is a size limit though that quickly gets exhausted if you are storing text (2000 chars)
This is the right answer here. The solution works until it doesn’t. Browser URLs are limited in real life. So when the state grows it will break sooner or later. Of course it depends on the usecase.
Re: How to store your app's entire state in the url
#19Hah, I came up with the same thing for https://fivethreeone.app/calculator . The reason I did the compression (using pako as well) was that without it the URL was too long to show a preview on iMessage. I also compress the state manually myself which saved a bunch of bytes too.
[deleted]
Re: How to store your app's entire state in the url
#20Hey all, I made this post to show a technique that I'm using in my keyboard-centric flowchart editor [0]. I really love urls, and the power that they hold, and would love to see more apps implement little hacks like this. Also, another shout out to mermaidjs and flowchart.fun for also implementing similar url-based sharing. [0] https://www.knotend.com
There is a size limit though that quickly gets exhausted if you are storing text (2000 chars)
(maker of flowchart.fun here) This is technically true but it's a little more nuanced. The 2048 character limit comes from Internet Explorer. There's a great answer on SO https://stackoverflow.com/a/417184/903980
Still on FF I opted to use LZ Compression (pretty sure many other sites do this as well) to get the number of characters down