Actually Opera doesn't have 5MB limit. It offers to increase limit as applications requires more. User can even choose "Unlimited storage" for a domain.

You can easily test localStorage limits/quota yourself.

Here's a straightforward script for finding out the limit:

if (localStorage && !localStorage.getItem('size')) { var i = 0; try { // Test up to 10 MB for (i = 250; i <= 10000; i += 250) { localStorage.setItem('test', new Array((i * 1024) + 1).join('a')); } } catch (e) { localStorage.removeItem('test'); localStorage.setItem('size', i - 250); } } 

Here's the gist, JSFiddle and blog post.

The script will test setting increasingly larger strings of text until the browser throws and exception. At that point it’ll clear out the test data and set a size key in localStorage storing the size in kilobytes.

Find the maximum length of a single string that can be stored in localStorage

This snippet will find the maximum length of a String that can be stored in localStorage per domain.

//Clear localStorage for (var item in localStorage) delete localStorage[item]; window.result = window.result || document.getElementById('result'); result.textContent = 'Test running…'; //Start test //Defer running so DOM can be updated with "test running" message setTimeout(function () { //Variables var low = 0, high = 2e9, half; //Two billion may be a little low as a starting point, so increase if necessary while (canStore(high)) high *= 2; //Keep refining until low and high are equal while (low !== high) { half = Math.floor((high - low) / 2 + low); //Check if we can't scale down any further if (low === half || high === half) { console.info(low, high, half); //Set low to the maximum possible amount that can be stored low = canStore(high) ? high : low; high = low; break; } //Check if the maximum storage is no higher than half if (storageMaxBetween(low, half)) { high = half; //The only other possibility is that it's higher than half but not higher than "high" } else { low = half + 1; } } //Show the result we found! result.innerHTML = 'The maximum length of a string that can be stored in localStorage is <strong>' + low + '</strong> characters.'; //Functions function canStore(strLen) { try { delete localStorage.foo; localStorage.foo = Array(strLen + 1).join('A'); return true; } catch (ex) { return false; } } function storageMaxBetween(low, high) { return canStore(low) && !canStore(high); } }, 0); 

<h1>LocalStorage single value max length test</h1> <div id='result'>Please enable JavaScript</div> 

Note that the length of a string is limited in JavaScript; if you want to view the maximum amount of data that can be stored in localStorage when not limited to a single string, you can use the code in this answer.

Edit: Stack Snippets don't support localStorage, so here is a link to JSFiddle.

Results

Chrome (45.0.2454.101): 5242878 characters
Firefox (40.0.1): 5242883 characters
Internet Explorer (11.0.9600.18036): 16386 122066 122070 characters

I get different results on each run in Internet Explorer.

Don't assume 5MB is available - localStorage capacity varies by browser, with 2.5MB, 5MB and unlimited being the most common values. Source: http://dev-test.nemikor.com/web-storage/support-test/

I wrote this simple code that is testing localStorage size in bytes.

https://github.com/gkucmierz/Test-of-localStorage-limits-quota

const check = bytes => { try { localStorage.clear(); localStorage.setItem('a', '0'.repeat(bytes)); localStorage.clear(); return true; } catch(e) { localStorage.clear(); return false; } }; 

Github pages:

https://gkucmierz.github.io/Test-of-localStorage-limits-quota/

I have the same results on desktop Google chrome, opera, firefox, brave and mobile chrome which is ~10Mbytes

And half smaller result in safari ~4Mbytes

You don't want to stringify large objects into a single localStorage entry. That would be very inefficient - the whole thing would have to be parsed and re-encoded every time some slight detail changes. Also, JSON can't handle multiple cross references within an object structure and wipes out a lot of details, e.g. the constructor, non-numerical properties of arrays, what's in a sparse entry, etc.

Instead, you can use Rhaboo. It stores large objects using lots of localStorage entries so you can make small changes quickly. The restored objects are much more accurate copies of the saved ones and the API is incredibly simple. E.g.:

var store = Rhaboo.persistent('Some name'); store.write('count', store.count ? store.count+1 : 1); store.write('somethingfancy', { one: ['man', 'went'], 2: 'mow', went: [ 2, { mow: ['a', 'meadow' ] }, {} ] }); store.somethingfancy.went[1].mow.write(1, 'lawn'); 

BTW, I wrote it.

I've condensed a binary test into this function that I use:

function getStorageTotalSize(upperLimit/*in bytes*/) { var store = localStorage, testkey = "$_test"; // (NOTE: Test key is part of the storage!!! It should also be an even number of characters) var test = function (_size) { try { store.removeItem(testkey); store.setItem(testkey, new Array(_size + 1).join('0')); } catch (_ex) { return false; } return true; } var backup = {}; for (var i = 0, n = store.length; i < n; ++i) backup[store.key(i)] = store.getItem(store.key(i)); store.clear(); // (you could iterate over the items and backup first then restore later) var low = 0, high = 1, _upperLimit = (upperLimit || 1024 * 1024 * 1024) / 2, upperTest = true; while ((upperTest = test(high)) && high < _upperLimit) { low = high; high *= 2; } if (!upperTest) { var half = ~~((high - low + 1) / 2); // (~~ is a faster Math.floor()) high -= half; while (half > 0) high += (half = ~~(half / 2)) * (test(high) ? 1 : -1); high = testkey.length + high; } if (high > _upperLimit) high = _upperLimit; store.removeItem(testkey); for (var p in backup) store.setItem(p, backup[p]); return high * 2; // (*2 because of Unicode storage) } 

It also backs up the contents before testing, then restores them.

How it works: It doubles the size until the limit is reached or the test fails. It then stores half the distance between low and high and subtracts/adds a half of the half each time (subtract on failure and add on success); honing into the proper value.

upperLimit is 1GB by default, and just limits how far upwards to scan exponentially before starting the binary search. I doubt this will even need to be changed, but I'm always thinking ahead. ;)

On Chrome:

> getStorageTotalSize(); > 10485762 > 10485762/2 > 5242881 > localStorage.setItem("a", new Array(5242880).join("0")) // works > localStorage.setItem("a", new Array(5242881).join("0")) // fails ('a' takes one spot [2 bytes]) 

IE11, Edge, and FireFox also report the same max size (10485762 bytes).

You can use the following code in modern browsers to efficiently check the storage quota (total & used) in real-time:

if ('storage' in navigator && 'estimate' in navigator.storage) { navigator.storage.estimate() .then(estimate => { console.log("Usage (in Bytes): ", estimate.usage, ", Total Quota (in Bytes): ", estimate.quota); }); } 

I'm doing the following:

getLocalStorageSizeLimit = function () { var maxLength = Math.pow(2,24); var preLength = 0; var hugeString = "0"; var testString; var keyName = "testingLengthKey"; //2^24 = 16777216 should be enough to all browsers testString = (new Array(Math.pow(2, 24))).join("X"); while (maxLength !== preLength) { try { localStorage.setItem(keyName, testString); preLength = testString.length; maxLength = Math.ceil(preLength + ((hugeString.length - preLength) / 2)); testString = hugeString.substr(0, maxLength); } catch (e) { hugeString = testString; maxLength = Math.floor(testString.length - (testString.length - preLength) / 2); testString = hugeString.substr(0, maxLength); } } localStorage.removeItem(keyName); // Original used this.storageObject in place of localStorage. I can only guess the goal is to check the size of the localStorage with everything but the testString given that maxLength is then added. maxLength = JSON.stringify(localStorage).length + maxLength + keyName.length - 2; return maxLength; }; 

I really like cdmckay's answer, but it does not really look good to check the size in a real time: it is just too slow (2 seconds for me). This is the improved version, which is way faster and more exact, also with an option to choose how big the error can be (default 250,000, the smaller error is - the longer the calculation is):

function getLocalStorageMaxSize(error) { if (localStorage) { var max = 10 * 1024 * 1024, i = 64, string1024 = '', string = '', // generate a random key testKey = 'size-test-' + Math.random().toString(), minimalFound = 0, error = error || 25e4; // fill a string with 1024 symbols / bytes while (i--) string1024 += 1e16; i = max / 1024; // fill a string with 'max' amount of symbols / bytes while (i--) string += string1024; i = max; // binary search implementation while (i > 1) { try { localStorage.setItem(testKey, string.substr(0, i)); localStorage.removeItem(testKey); if (minimalFound < i - error) { minimalFound = i; i = i * 1.5; } else break; } catch (e) { localStorage.removeItem(testKey); i = minimalFound + (i - minimalFound) / 2; } } return minimalFound; } } 

To test:

console.log(getLocalStorageMaxSize()); // takes .3s console.log(getLocalStorageMaxSize(.1)); // takes 2s, but way more exact 

This works dramatically faster for the standard error; also it can be much more exact when necessary.

Once I developed Chrome (desktop browser) extension and tested Local Storage real max size for this reason.

My results:

Ubuntu 18.04.1 LTS (64-bit) Chrome 71.0.3578.98 (Official Build) (64-bit) Local Storage content size 10240 KB (10 MB) 

More than 10240 KB usage returned me the error:

Uncaught DOMException: Failed to execute 'setItem' on 'Storage': Setting the value of 'notes' exceeded the quota.

Edit on Oct 23, 2020

For a Chrome extensions available chrome.storage API. If you declare the "storage" permission in manifest.js:

{ "name": "My extension", ... "permissions": ["storage"], ... } 

You can access it like this:

chrome.storage.local.QUOTA_BYTES // 5242880 (in bytes) 

According to web.dev the size is limited to almost around 5-10 MB

itself, but the article vehemently opposes using localstorage as it is synchronous and blocks the JS thread; which is a deal breaker. Another limitation is strict string storage policy (sssp) which takes a lot of preprocessing to parse and get desired o/p.

A comparative analysis on all forms of storage for the web is mentioned here. take a look:

https://web.dev/storage-for-the-web/#:~:text=LocalStorage%20should%20be%20avoided%20because,web%20workers%20or%20service%20workers.