Local storage math

Akshat Jiwan Sharma, Thu Apr 18 2013

W3 has suggested that browsers impose certain restrictions on local storage.These restrictions are two fold

  1. They suggest that there be an arbitrary limit of 5MB of data per domain
  2. That browsers guard against data being stored on sub-domains to prevent circumvention against restriction 1

Recently I started using HTML5 local storage in brislnk.So obviously my initial reaction on the 5MB limit was why so little? Disk space is quite cheap these days and I would have expected the recommendation to be a lot higher.I decided to measure exactly how much I can store within the limit.

The first hurdle that I encountered was how do I actually measure the stored data? Stackoverflow user morgon helped me there.As mentioned in the comments, the results were accurate enough for my needs.So I decided to give it a go

demo

The results were surprising.563 bytes for 8 items stored! Not bad at all.I expected it to be a lot more.For brislink I store URL of the pages that have already been broadcasted so these results may vary for you depending upon what you are actually storing.

Using JSON.stringify(localstorage) I got a json string of the entire data stored in local storage for the domain.How about we count the number of characters in the string? Using this character counting tool I found out that the string had 545 characters.So more or less each character is equal to one byte.Sweet.

How many URL’s can I store this way?Simple

8 URL’S take 563 bytes

1 URL will take 563/8 = 70.375 bytes

This will depend upon the number of characters in a url which will vary a lot but remember I am just looking for an estimate.

Number of URLs that I can store

1000 X 1000 X 5/ 70.375 = 71,047.95737

Wow that is quite a lot.I don’t think that I am ever going to write that many articles.Now that I have an idea of how much space I am using and how to calculate it, I have figured out a way to reduce it.Initially my strategy for storing the key value pairs was

url : true

I don’t think I need a ‘true’ with every url.Any truthy value will suffice.So I am modifying it to

url : 1

Storing true with every URL cost me 4 bytes.Storing ‘1’ costs 1 byte.That is quite a reduction and best of all it is easy to implement into my code.

You can carry out these tests easily in your browser.If you are reading this article and have not turned javascript off then already a key value pair has been stored by your browser.To calculate the size of local storage for the current domain just type this in the console of your browser.

JSON.stringify(localstorage).length;

brislink has reincarnated as specter, the posts in the brislink blog have moved to my personal blog


comments powered by Disqus