CODEWITHSUNDEEP
javascripthtmllocal-storage
Mattias
Mattias

Reputation: 3189

How much space does the localstorage key itself take up?

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","");

Upvotes: 10

Views: 2376

Answers (5)

Scimonster
Scimonster

Reputation: 33409

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.

Upvotes: 0

RevanProdigalKnight
RevanProdigalKnight

Reputation: 1326

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):

Firefox console output

Chrome (42.0.2311.90 m):

Chrome console output

IE 11 (11.0.9600.17420):

IE Console Output

Opera (29.0.1795.47):

Opera console output

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.

Upvotes: 2

qwattash
qwattash

Reputation: 855

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

Upvotes: 1

Rahul Tripathi
Rahul Tripathi

Reputation: 172628

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:

enter image description here

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

Upvotes: 1

Alex
Alex

Reputation: 21766

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>')

Upvotes: 1

Related Questions