localStorage 值的最大大小是多少？

目前localStorage只支持字符串作为值，对象需要先转换成JSON字符串才能存入localStorage。使用本地存储存储的数据不会发送回服务器（与 cookie 不同）。所有数据都保留在客户端，因此对值的长度有一个明确的限制，我们目前可以存储2 MB到10 MB大小的数据，具体取决于我们使用的浏览器。

句法：

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

代码：

此代码用于计算 localStorage 变量的大小。

javascript

Page Title
  
    //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');
}
 
  



     localStorage limit in your Browser is
     ... KBs.

输出：

localStorage limit in your Browser is 5000 KBs.

解释：

此 javascript 代码将通过添加不断增加的长度字符串来运行，直到浏览器引擎抛出异常。此后，它将清除测试数据并在 localStorage 中设置一个 size 键，该键将存储 localStorage 的大小，以千字节 (KBs) 为单位。

参考： https://www.geeksforgeeks.org/html-dom-storage-setitem-method/