LocalStorage存储限制因浏览器而异，通常为5MB，Chrome、Firefox、Edge等支持约5MB每源，Safari在隐私模式可能禁用，iOS Safari限制更严，IE8+为10MB但行为不一；超出限制会触发QuotaExceededError异常，因此调用setItem时应使用try-catch捕获错误；建议仅存储必要数据如用户偏好，避免大对象或大量文本，定期清理过期数据，可通过命名约定标记有效期，并优先选择sessionStorage或IndexedDB应对大容量需求；虽无标准API获取已用空间，但可遍历localStorage键值，按UTF-16编码估算字节数，实现简单用量统计，合理管理可有效提升稳定性与用户体验。
LocalStorage 的存储限制是前端开发中需要注意的关键点之一。大多数现代浏览器对每个域名的 LocalStorage 限制为 5MB 左右，但具体数值可能因浏览器而异。
常见浏览器的 LocalStorage 限制
不同浏览器对 LocalStorage 的容量限制略有差异：
- Chrome、Firefox、Edge：约 5MB 每个源（协议 + 域名 + 端口）
- Safari（桌面）：约 5MB，但在隐私模式下可能禁用或限制为 0
- iOS Safari：限制更严格，通常为 5MB，但旧版本可能更低
- IE8+：支持，限制为 10MB，但行为与其他浏览器不一致
超出限制会发生什么？
当尝试存储的数据超过配额时，浏览器会抛出 QuotaExceededError 异常。这通常发生在调用 localStorage.setItem() 时。
例如：
立即学习“Java免费学习笔记（深入）”；
try {
localStorage.setItem('largeData', 'a'.repeat(6 * 1024 * 1024)); // 尝试存入6MB
} catch (e) {
console.error('存储失败：', e);
}建议在使用 setItem 时始终包裹 try-catch，避免因存储失败导致脚本中断。
如何优化和管理 LocalStorage 使用？
由于空间有限，合理使用 LocalStorage 非常重要：
- 只存储必要数据，如用户偏好、简单状态等
- 避免存储大量文本或序列化后的复杂对象
- 定期清理过期或无用数据，使用 key 的命名约定标记有效期
- 考虑使用 sessionStorage 或 IndexedDB 替代大容量需求场景
检查当前使用情况
虽然没有标准 API 直接获取已用空间，但可以通过以下方式估算：
function getLocalStorageUsage() {
let total = 0;
for (let key in localStorage) {
if (localStorage.hasOwnProperty(key)) {
total += (key.length + localStorage[key].length) * 2; // 字符按 UTF-16 估算
}
}
return total;
}
console.log(`已使用: ${getLocalStorageUsage()} 字节`);基本上就这些。注意容量限制和异常处理，能有效避免因存储问题影响用户体验。
