localStorage and sessionStorage are two very useful features in HTML5 that are useful for many reasons that I won’t get into. According to the specs, a website should be able to store up to 5MB of data in a user’s browser. This article looks at just how much 5MB is, and are browsers actually following the 5MB recommendation?
Some Quick Numbers
1 page of “a” = ~3696 characters
1 page of Lorum Ipsum = ~4292 characters
1 page of “0” = ~3486 characters
1 page of “|” = ~3864 characters
1 page of “1” = ~3403 characters
average 1 page = ~3748 characters per page
1 character = 1 byte
1024 characters equals 1 KB
1,047,576 characters equals 1MB
5,242,880 characters equals 5MB
5,242,880/3749 = ~1398 pages
Storage Capacity Test
Chrome 27 actual… ~2,551,000 characters (Via test)… less than half?
Either we’re looking at only 2.49 MB of storage OR “UFT16 is used for localStore” (via: Stack Overflow)
NOTE: Opera Next 15 had the same results, which makes sense since it is based on chrome 28.
Firefox 22 actual… ~5,101,000 characters (Via test) which is about 4.98 MB. Also to note, Firefox’s sessionStorage allows for unlimited data.
Internet Explorer 10
Internet Explorer 10 actual… ~4,864,000 characters (Via test) which is about 4.75 MB.
I took an object containing 26 arrays (one for each letter of the alphabet) which contain in total 178,691 words from the English language. When I ran JSON.stringify on it, it turned into a JSON data string that had a length of 2,120,706 which fits within our localStorage capacity, even if we’re going off of Chrome’s 2,551,000 character limit.
That’s a lot of data.
So, unless you’re planning on storing a ridiculous amount of data, you probably won’t run into a situation where 5MB isn’t enough, although you should actually plan for only ~2.5MB due to Chrome’s limitation.