What Is the Max Size of Localstorage Values

What is the max size of localStorage values?

Quoting from the Wikipedia article on Web Storage:

Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity (10 MB per origin in Google Chrome(https://plus.google.com/u/0/+FrancoisBeaufort/posts/S5Q9HqDB8bh), Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer) and better programmatic interfaces.

And also quoting from a John Resig article [posted January 2007]:

Storage Space

It is implied that, with DOM Storage,
you have considerably more storage
space than the typical user agent
limitations imposed upon Cookies.
However, the amount that is provided
is not defined in the specification,
nor is it meaningfully broadcast by
the user agent.

If you look at the Mozilla source code
we can see that 5120KB is the default
storage size for an entire domain.
This gives you considerably more space
to work with than a typical 2KB
cookie.

However, the size of this storage area
can be customized by the user (so a
5MB storage area is not guaranteed,
nor is it implied) and the user agent
(Opera, for example, may only provide
3MB - but only time will tell.)

localStorage Size Limits... What are the options?

localstorage limits are not tied to the javascript framework, but to the browser you're using. Currently specs are suggesting to limit the storage space to 5MB and this is the space maximum available on modern browser

On older versions of internet explorer (IE<8) userData behaviour (which mimics the localstorage) has a limit of 128kb for page (512kb is the maximum amount for an intranet page)

anyway for a complete list see http://dev-test.nemikor.com/web-storage/support-test/

What happens when localStorage is full?

Firstly, some useful resources:

• Web
  Storage Support Test - has a table comparing data storage quotas
  between browsers.
• Simple
  localStorage quota test
• Summary of localStorage browser behaviour
• W3C spec - indicating how a user agent (e.g. browser) should behave (both localStorage and sessionStorage).

In answer to your question, desktop browsers tend to have an initial maximum localStorage quota of 5MB per domain. This can be adjusted by the user in some cases:

• Opera: opera:config -> Domain Quota For localStorage
• Firefox: about:config -> dom.storage.default_quota

In Chrome, there doesn't seem to be a way for the user to adjust this setting although like Opera, localStorage data can be edited directly per domain using the Developer Tools.

When you try to store data in localStorage, the browser checks whether there's enough remaining space for the current domain.
If yes:

• The data is stored, overwriting values if an identical key already exists.

If no:

• The data is not stored and no existing data is overwritten.
• A QUOTA_EXCEEDED_ERR exception is thrown.

In this case, getItem(key) will return the last value that was successfully stored, if any.

(Opera is slightly different in that it displays a dialog box giving the user the choice of increasing storage space for the current domain.)

Note that sessionStorage and localStorage are both implementations of the same Storage object so their behaviour is similar and error handling is the same.

Store huge data in localStorage

LocalStorage has size limits that vary depending on the browser. This is to prevent malicious scripts from filling a user's hard drive.

You can test your browser's localStorage limits here: https://arty.name/localstorage.html

The simple answer is, you shouldn't try to store more than 5MB-10MB of data on the client, depending on the browser. Needing to store that much local data is a sign that you probably need to come up with a better solution.

One other possibility for storing data locally is IndexedDB, which has reasonable compatibility across modern browsers. It's a object store which acts a lot like document databases such as MongoDB. You can store objects without converting them to strings and you can query those objects the way you would a database.

Most browsers seem to have a "soft" limit of around 5MB on IndexedDB storage. It's a soft limit because it's not necessarily enforced so you can go store much more if the browser allows it. Your mileage may vary.

Is there a limit to the key length for localStorage?

Yes, the limit is 5MB per domain.
Your string can be as long as you want. The total usage must, however, be under 5 MB.

http://dev.w3.org/html5/webstorage/

http://www.stackoverflow.com/questions/2747285/html5-localstorage-restrictions-and-limits

How to find the size of localStorage

Execute this snippet in JavaScript console (one line version):

var _lsTotal=0,_xLen,_x;for(_x in localStorage){ if(!localStorage.hasOwnProperty(_x)){continue;} _xLen= ((localStorage[_x].length + _x.length)* 2);_lsTotal+=_xLen; console.log(_x.substr(0,50)+" = "+ (_xLen/1024).toFixed(2)+" KB")};console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

The same code in multiple lines for reading sake

var _lsTotal = 0,
    _xLen, _x;
for (_x in localStorage) {
    if (!localStorage.hasOwnProperty(_x)) {
        continue;
    }
    _xLen = ((localStorage[_x].length + _x.length) * 2);
    _lsTotal += _xLen;
    console.log(_x.substr(0, 50) + " = " + (_xLen / 1024).toFixed(2) + " KB")
};
console.log("Total = " + (_lsTotal / 1024).toFixed(2) + " KB");

or add this text in the field 'location' of a bookmark for convenient usage

javascript: var x, xLen, log=[],total=0;for (x in localStorage){if(!localStorage.hasOwnProperty(x)){continue;} xLen =  ((localStorage[x].length * 2 + x.length * 2)/1024); log.push(x.substr(0,30) + " = " +  xLen.toFixed(2) + " KB"); total+= xLen}; if (total > 1024){log.unshift("Total = " + (total/1024).toFixed(2)+ " MB");}else{log.unshift("Total = " + total.toFixed(2)+ " KB");}; alert(log.join("\n")); 

P.S. Snippets are updated according to request in the comment. Now the calculation includes the length of the key itself.
Each length is multiplied by 2 because the char in javascript stores as UTF-16 (occupies 2 bytes)

P.P.S. Should work both in Chrome and Firefox.

How large is HTML5 session storage?

According to this site, Firefox’s and Safari’s storage limit is 5MB per domain, Internet Explorer’s limit is 10 MB per domain.

However, according to this site which tests your web browser local storage capabilities, on my machine:

Browser        LocalStorage         SessionStorage
-------        ------------         --------------
Chrome              5M                   5M
Firefox             5M                Unlimited
IE11                5M                   5M

Also, note the handy chart at the bottom of the page.

Increase size of the localStorage for one domain name?

The value of 5MB is not always true. The local storage size varies from browser to browser (2.5 MB per origin in Google Chrome; 5 MB per origin in Mozilla Firefox, and Opera; 10 MB per storage area in Internet Explorer).

You can get more info about local storage for each browser here. You can also test your browser's local storage here.

If you have a lot of data to store and local storage is not sufficient for you, you can always try Web SQL (available in WebKit and Opera) or IndexedDB (available in all modern decent browsers)

---

Related Topics