Skip to content
Related Articles

Related Articles

Improve Article

What is the max size of localStorage values?

  • Last Updated : 14 Aug, 2020
Geek Week

Currently localStorage only supports strings as values, and the objects need to be converted to JSON strings before they are stored in the localStorage. Data stored using local storage isn’t sent back to the server (unlike cookies, ). All the data stays on the client-side, thus there is a defined limitation regarding the length of the values, and we can currently store from 2 MB to 10 MB size of data depending upon the browser we use.

Syntax:

localStorage.setItem ( 'abc', 10 ); 
// this integer 10 gets converted to a string "10" 
// and then stored in localStorage variable named "abc".

Code:

This code is to calculate the size of localStorage variable.




<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
  <script>
    //this script is to find the size of localStorage
      
    function func1(num) 
    {
        return new Array((num * 1024) + 1).join('a')
    }
  
    // Determine the size of localStorage if it's not set
  
    if (!localStorage.getItem('size')) {
    var i = 0;
    try {
        // Test up to 10 MB
        for (i = 0; i <= 10000; i += 250) {
            localStorage.setItem('test', func1(i));
        }
        } catch (e) {
        localStorage.removeItem('test');
        localStorage.setItem('size', i ? i - 250 : 0);
        }
    }
          
// when window is loaded this function is
// called and the size of localStorage is calculated    
window.onload = function calculate(){
    var el = document.getElementById('size');        
    el.innerHTML = localStorage.getItem('size');
}
  
  </script>
</head>
<body>
<div >
     localStorage limit in your Browser is 
     <span id="size">...</span> KBs.
</div>
</body>
</html>

Output:



localStorage limit in your Browser is 5000 KBs.

Explation:

This javascript code will run by adding continuously increasing length strings until the browser engine throws an exception. After this point, it will clear the test data and will set a size key in localStorage that will store the size of localStorage in kilobytes (KBs).

Reference: https://www.geeksforgeeks.org/html-dom-storage-setitem-method/

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :