Simple localStorage Calculator
Here is a quick webpage I built to calculate these actual localStorage space is available and display a bar of how much of this space you have currently used.
Demo can be found at http://glynrob.com/webapp/lscalc/index.php
Code can be viewed and downloaded from https://github.com/glynrob/localStorageCalc
By default the amount of data you can store in localStore is:
2.5 MB per origin in Google Chrome
5 MB per origin in Mozilla Firefox
5 MB per origin in Opera
10 MB per storage area in Internet Explorer
Storage size can be customized by the user so this is not guranteed which is why I built this code.
This example uses jQuery, JSON2 and the jQueryUI progress bar
So the code first checks to see if it knows what storage size is available, and if it does not have this value it requests you to run a test to find out.
As you can see from the code, it creates 1KB string and assigns it to localStorage until the browser stops it.
At that point it knows how much data it has entered so can clear all the data it has just added.
Then setting this value into localStorage means it can be used without having to do the calculation again.
Current data stored
This loops through all values in the localStorage and returns back the full byte size of all that data.
The progress bar is just using jQueryUI and setting the width of the bar to the percentage of data stored against the amount of space that is available.
Hope this helps someone.