W3 has suggested that browsers impose certain restrictions on local storage.These restrictions are two fold
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
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.