In the next update of Process Street we are adding more caching to our front end JavaScript client (named Front Street after the street in Toronto) in an effort to make the experience of using our app as fast as possible.

Front Street uses web storage (specifically localStorage) to store persistent user data. To make the cache as effective as possible, it should be able to grow to use as much space as it can. However, we also store other information in localStorage, like user session information (the user's login token and list of teams, for example). That means if the cache grew to use all the localStorage space, the app couldn't function properly. Thus, we needed a way to detect the size of localStorage so we could partition localStorage between cache and session information.

After a cursory search on StackOverflow, I found this page, along with the script they used.

However, the code in that script seemed unnecessarily complicated. Instead, I decided to write my own script which is much simpler:

You can test the script with this JSFiddle. The script will test setting increasingly larger strings of text until the browser throws and exception. At that point it'll clear out the test data and set a size key in localStorage storing the size in kilobytes. Using this script you can detect the total size of the localStorage and partition accordingly.