How much space does the localstorage key itself take up?

Question

Lets say i create a localstorage key and give it an empty string. Does the name of the keyitem take up the same amount of space as the value would per character?

for instance does

localStorage.setItem("keyitem","") 
//Equal the space of this other one under?
localStorage.setItem("key","item");

Also, does the amount of keys matter? for instance

localStorage.setItem("key","");
//Equal the amount of storage as the 3 under combined? 
localStorage.setItem("k","");
localStorage.setItem("o","");
localStorage.setItem("h","");

Answer 1

Does the name of the keyitem take up the same amount of space as the value would per character?

No, it is not necessary. The amount of space taken by key could be more than the amount of space taken by value. But together the space taken by key and value should be approx 5MB(although this differs with browser as it is browser dependent)

You can use this code to test:

localStorage.clear();
localStorage.setItem(new Array(5e6).join(' '),'');
localStorage.key(0).length;

Output on Chrome for the above test:

So as long as it comes under 5MB(which is mostly the upper limit for most browsers) your key can have any length

Answer 2

I found a function once to calculate the size of the localStorage and sessionStorage objects, but I can't remember where I found it.

Here's the code:

Storage.prototype.size = function(units) {
    'use strict';
    units = units ? units.toUpperCase() : 'MB';
    var size = unescape(encodeURIComponent(JSON.stringify(this))).length;
    switch (units) {
        case 'B': return [size,'B'].join(' ');
        case 'KB': return [+(size / 1024).toFixed(3),'KB'].join(' ');
        default: return [+(size / 1024 / 1024).toFixed(3),'MB'].join(' ');
    }
};

I decided to go ahead and run some tests in various browsers.

Firefox (37.0.2):

Chrome (42.0.2311.90 m):

IE 11 (11.0.9600.17420):

Opera (29.0.1795.47):

So it looks like FireFox, Chrome, and Opera (probably Safari as well, but I don't have that) all have the same behavior, and keys take up far more space than their values.

In IE (good old IE...), the implementation is executed in a way such that it doesn't matter how you store something.

Answer 3

You can determine this yourself by using the JSON stringify methods to turn the localStorage object into a JSON Object:

JSON.stringify(localStorage).length

This will not return the actual size of the key as data can be stored as utf16 (2 bytes) or utf8 (1 byte), but it is a good proxy for the actual size. See a code snippet below:

 localStorage.clear()
 localStorage.setItem("keyitem","") 
 document.write(JSON.stringify(localStorage).length+'</br>')

 //Equal the space of this other one under?
 localStorage.setItem("key","item");
 document.write(JSON.stringify(localStorage).length+'</br>')

 localStorage.clear();
 localStorage.setItem("key","");
 document.write(JSON.stringify(localStorage).length+'</br>')


 //Equal the amount of storage as the 3 under combined? 
 localStorage.setItem("k","");
 localStorage.setItem("o","");
 localStorage.setItem("h","");
 document.write(JSON.stringify(localStorage).length+'</br>')

Answer 4

I would say that this is an implementation detail for what is concerning the real structure of the storage on disk.

In practice you are given a certain amount of space per origin (usually 5MiB, to check the actual storage you can use this test tool linked in the MDN documentations) and you can store data (both in terms of keys and values) as long as you don't exceed that size, as shown in a previous answer. So yes the keys are included in the storage quota.

As it points out in the test tool I included, chars are actually UTF-16 so they takes up 2 bytes of your storage quota.

Also note that the storage stores strings, this means that if you put a large float as key or value you are not storing it in its binary format but as strings!

// These takes up the same space
localStorage.setItem("a", 123);
localStorage.setItem("a", "123");

In fact if you try to do typeof of the following you get string in both cases

localStorage.setItem("123", "");
localStorage.setItem(123, "");
typeof localStorage.key(0); // returns "string"
typeof localStorage.key(1); // returns "string" as well

As for the second part, in terms of storage this

localStorage.setItem("k","");
localStorage.setItem("o","");
localStorage.setItem("h","");

should take 3 chars of storage from your quota, that is 3 * 2 bytes if using UTF-16 or 3 bytes if using UTF-8.

For an overview of local storage solutions you can check here http://www.html5rocks.com/en/features/storage

Answer 5

I ran a test in Chrome and was able to prove that the key takes up exactly as much space as the length.

With a key of abc, i was able to set a value of length 5242877. With a key of a, i was able to set a value of length 5242879. As you can see, removing characters from the key freed up those 2 for the value.