Web Dev

How to: Create a ‘remaining storage’ bar for HTML5 LocalStorage

By 25th February 2013 5 Comments

LocalStorage

I’ve been looking around the web for a while to try and find peoples solutions for creating a progress bar to display how much space is left in local storage on a HTML5 site. Unfortunately, there aren’t many that are that great from what I can see and only IE supports the remainingStorage function as far as I can see from searching. Unfortunately, the application I am working on requires use of every other browser as it will be used across multiple platforms including Windows, Linux, Mac, and mobile devices.

Well I have put together from looking at various solutions something that works perfectly for me showing a progress bar with the remaining local storage space!

I started off by finding the line of code that tells you how much storage space is left.

var storage = 1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length;
This gives the remaining storage at the point which the line is hit. So in theory you can get an approximate value for the total local storage for the application by clearing the local storage, executing the line of code and then immediately save it into local storage so you always know how much you have!
localStorage.setItem("totalStorage", storage);
Now that you have the complete local storage size stored, it is just simple maths to work out the percentage left. You just run the line of code for checking how much storage is left after you save something to local storage, divide it by the total storage value and then multiply all that by 100. For my own purposes I have rounded the percentage so that I can show percentages that don’t have trailing decimal places.
var storageSpace = localStorage.getItem("totalStorage");
var currentStorageSpace = 1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length; 
var percentageLeft = Math.round((currentStorageSpace / storageSpace) * 100);
That is your percentage of local storage space left! Now you need to present it to the user. To do this you will need to add the following HTML elements to your page:
<div id='storageSpaceBar'>
   <div id='storageSpaceValue'>
      <div id='storageSpaceText'></div>
   </div>
</div>
The text is an optional addition. I’ve added it so the user can actually see what the percentage left is rather than having to guess by the size of the bar. You will need to add a little styling to these divs so add the following to your stylesheet:
#storageSpaceBar {
    background-color: #000000;
    color:#FFFFFF; 
}

#storageSpaceValue {
    padding: 3px;
    margin-bottom: 5px;
    background-color: #1BA1E2; 
    width: 0%;
}
The colours are obviously for you to play with so you can have them however you want them. Now to modify the size of the storageSpaceValue div element depending on the percentage of the storage left! Note: I am using jQuery for this.
$('#storageSpaceValue').css('width', percentageLeft + "%");
$('#storageSpaceText').text("Remaining Storage: " + percentageLeft + "%");
You will now have a bar on your page representing the remaining local storage. You can then add additional features such as alerts for when the percentage drops below a certain level and change the background colour of the bar to red for example.

Please feel free to play with this code and do with it what you will. I will upload source soon.

Author James Croft

James is a senior software developer for Black Marble and Microsoft MVP in Windows Development with over 6 years of experience developing applications for the Windows platform. James’s passion for learning new technologies gives him the opportunities to expose them to the wider community through tutorials, lessons learned and best practices through his online blog site, personal YouTube channel, and local communities through talks at events, schools and universities.

More posts by James Croft

Join the discussion 5 Comments

  • Eddie says:

    Have you completed this code? Can you share it?

  • Toadbomb says:

    Hey James, there is an error in your calculations. Your line “1024 * 1024 * 5 – unescape(encodeURIComponent(JSON.stringify(localStorage))).length;” does not work out their total storage space available. If you empty their local storage, and then run this, the answer will always be the same: 5242878. Why? It’s simple math. What you are doing here is taking 1024*1024*5 (which equals 5242880), and then the second half of this calculation will always return “2”, because the length of the string representing an empty localStorage object will be 2. So, in essence your calculation to work out their total available space is just “1024 * 1024 * 5 – 2”. If you really want to find the user’s total available space, you will need to empty it, then fill it to the brim, and THEN just use “var storage = unescape(encodeURIComponent(JSON.stringify(localStorage))).length;” as this will tell you how many bytes are being taken up.

    Of course, this is a year old post and you may have realised your mistake by now, but I don’t see any other comments here so I thought I’d let you know.

    • James Croft says:

      Thank you, when I created this post I was assuming that every browser had 5MB of local storage and a few days later realised that it differs from version of browser to the browser itself. I never updated this post however as at the time I was in an internship and was quite busy with work. Thank you for finding this post though and leaving the comment though. I will update this soon!

Leave a comment