浏览器存储限制

不同浏览器的 LocalStorage 存储限制有所不同，一般在 5MB 左右。以下是一些常见浏览器的存储限制：

• Chrome: 5MB
• Firefox: 5MB
• Safari: 5MB
• Edge: 5MB

检测存储大小

可以使用一个函数来检测当前 LocalStorage 中已经存储的数据量：

function getLocalStorageSize() {
let total = 0;
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
total += (localStorage[key].length + key.length) * 2;
}
}
return (total / 1024).toFixed(2) + ' KB';
}
console.log('当前 LocalStorage 使用量: ' + getLocalStorageSize());

这个函数会计算 LocalStorage 中所有键值对的总大小，以 KB 为单位。
通过上述方法，可以捕获并处理 LocalStorage 的存储溢出错误，并根据需要采取适当的措施，例如清理旧数据或通知用户存储已满。

处理溢出

当 LocalStorage 超出存储限制时，通常会抛出 QuotaExceededError 错误。在大多数浏览器中，如果你尝试存储的数据超过了浏览器的存储配额限制，就会抛出这个错误。

try {
	// 尝试存储一个大数据对象
	localStorage.setItem('largeData', JSON.stringify(largeData));
} catch (e) {
if (e.name === 'QuotaExceededError') {
	console.error('LocalStorage 超出存储限制');
	// 可以在这里实现清理逻辑，例如删除一些不必要的旧数据
} else {
	console.error('发生了其他错误', e);
}
}