What is the max size of localStorage values?

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".

Example: This code is to calculate the size of localStorage variable. 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).

HTML

<div>
    localStorage limit in your Browser is
    <span id="size">...</span> KBs.
</div>
<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>

Output:

localStorage limit in your Browser is 5000 KBs.

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