I recall this technique being used in 1999. It doesn't work well with caching proxies which key off the URL, using a Cookie header is cleaner and simpler.
How to store your app's entire state in the url
41–50 of 416 posts
Re: How to store your app's entire state in the url
#42It's pretty common to do this using the URI fragment in a link.
For example: https://themeasureofaplan.com/market-timing/#initialContribu...
This shows the performance of a market timing strategy on the S&P500, where you invest $20,000 upfront and $1,000 per month thereafter, while only buying when the market is 25%+ away from the all-time high price (analysis from 1993 to 2023).
These user input variables are all directly encoded in the URL, after the # symbol.
Re: How to store your app's entire state in the url
#43Hey 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
Love the app!
Thanks!
Re: How to store your app's entire state in the url
#44Earlier quoted context omitted.
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). [1] https://stackoverflow.com/a/44532746
Weirdly, with IEs it was exactly 2083 characters (1) not some base 2 number and MS never increased this number over all these years. This upper limit even included fragments. We tried to do something similar as described in the article and were surprised to learn about IEs limitation. In the end, we stored states on a JS object instead using their hash sum as keys and put that inside the fragment. Then fragment based navigation worked like charm across browsers.
(1) https://support.microsoft.com/en-us/topic/maximum-url-length...
Re: How to store your app's entire state in the url
#45What is old is new again.
Back before websites were "Apps", you could often do exactly this (Including Authentication!) right from the url.
Re: How to store your app's entire state in the url
#46This brings to mind the concept of continuation found in Seaside Smalltalk.
Re: How to store your app's entire state in the url
#47I had to add compression into Mermaid live editor's URL state as the length limit was exceeded with big diagrams.
Wrote this SerDe which can be extended with better algorithms in the future. https://github.com/mermaid-js/mermaid-live-editor/blob/devel...
Eg: https://mermaid.live/edit#pako:eNo9kUGTnCAQhf8K1adNlesoqKiHV...
Re: How to store your app's entire state in the url
#48It's pretty common to do this using the URI fragment in a link. For example: https://themeasureofaplan.com/market-timing/#initialContribu... This shows the performance of a market timing strategy on the S&P500, where you invest $20,000 upfront and $1,000 per month thereafter, while only buying when the market is 25%+ away from the all-time high price (analysis from 1993 to 2023). These user input variables are all di…
This is a terrible example though, there is no reason why those shouldn't be normal query parameters.
Re: How to store your app's entire state in the url
#49It's pretty common to do this using the URI fragment in a link. For example: https://themeasureofaplan.com/market-timing/#initialContribu... This shows the performance of a market timing strategy on the S&P500, where you invest $20,000 upfront and $1,000 per month thereafter, while only buying when the market is 25%+ away from the all-time high price (analysis from 1993 to 2023). These user input variables are all di…
Interesting. Just to make sure I understand — that url contains all of the IDs and user inputs, and then you parse out of the key/value pairs and feed those inputs into the app?
Re: How to store your app's entire state in the url
#50I always like this when the url is always copyable, but in our app, the state can get quite large. We started with base64 encoded gzip of json.stringified app state but just gets quite long. Arguably it could be reduced a little bit, but would still be hundreds-thousands of chars routinely, so we switched to using a little URL shortening service that we wrote on aws lambda+dynamodb