Calculate localStorage space


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.

Example View:

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.

Storeage test

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.

Simple really.

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.

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *