在前端开发中，本地存储是经常被用到的一个功能。但是，我们是否了解过本地存储的值的最大尺寸有多少呢？这篇文章将会详细介绍本地存储的最大尺寸以及如何处理超出限制的情况。
本地存储
本地存储是指在浏览器中使用 JavaScript 操作存储数据的技术。它分为两种存储方式：localStorage 和 sessionStorage。两种存储方式都可以存储字符串类型的数据，但是它们的生命周期不同。localStorage 的值永久保存在浏览器中，而 sessionStorage 的值只在当前会话期间有效，关闭浏览器后就会失效。
最大尺寸
对于 localStorage 和 sessionStorage，它们各自的最大尺寸是不同的。
localStorage
对于 localStorage，浏览器的最大存储空间是由浏览器厂商自行定义的。一般来说，大多数浏览器都支持至少5MB以上的存储容量。但是，在实际应用中，我们不应该依赖于特定的存储空间大小，因为在不同的浏览器和移动设备上，这些值可能不同。
为了在代码中查询当前浏览器所支持的最大存储容量，我们可以使用以下代码：
-- -------------------- ---- -------
----- --------------- - --- -- -
--- -
----- --- - -------------------
------------------------- -----
-----------------------------
------ -------------------------------------- -- ------------------- - -------------------- - -----------------------
- ----- --- -
------ --
-
-----这段代码会尝试向 localStorage 中写入一个测试值，然后立即删除它。接着，它会根据浏览器提供的 API 计算出当前剩余的空间大小，并以字节数返回。
sessionStorage
对于 sessionStorage，每个浏览器都会有各自的存储限制。一般来说，它的最大存储容量也是在5~10MB之间。
超出限制的处理方法
当我们需要存储大量数据时，很容易超出本地存储的限制。在这种情况下，我们可以考虑以下几种方法来解决问题：
压缩数据
我们可以使用压缩算法来压缩要存储的数据，从而减小数据的体积。这样可以有效地延长本地存储的寿命。
const data = 'hello world';
const compressedData = LZString.compressToUTF16(data); // 使用 LZString 进行压缩
localStorage.setItem('data', compressedData);将数据分割成多个部分
我们可以将要存储的数据拆分为多个部分，然后将它们存储到不同的键中。当需要使用这些数据时，我们可以将它们合并为完整的数据。
const data = 'hello world';
const chunkSize = 1024 * 1024; // 每个块的大小为1MB
for (let i = 0; i < data.length; i += chunkSize) {
localStorage.setItem(`data-${i / chunkSize}`, data.slice(i, i + chunkSize));
}使用 IndexedDB
如果需要存储大量数据，并且希望在客户端进行查询和操作，我们可以考虑使用 IndexedDB。IndexedDB 是一个浏览器内置的数据库，支持更高效的数据管理和查询。
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/8314) ，转载请注明来源 [https://www.javascriptcn.com/post/8314](https://www.javascriptcn.com/post/8314)