前言
在浏览器中存储数据有许多不同的选项，哪一种最适合？本文将带你了解在浏览器存储数据的最佳方式，可以安全存储的数据量，以及在性能和可靠性上的改善。
提问
在正式开始前，尝试回答以下判断题：
- IndexedDB 仅限于 25MB？
答案👈
错。后文将介绍。- 应该避免使用 LocalStorage？
答案👈
对。LocalStorage 是同步的，可能阻塞主线程而导致性能问题。LocalStorage 被限制为大约 5MB，并且只能包含字符串。 Web Workers 和 Service Workers 无法访问 LocalStorage。- Cookie 应该被用于存储数据？
答案👈
错。Cookie 有其用途，但不应用于存储。Cookie 随每个 HTTP 请求一起发送，因此存储少量数据以外的任何内容都会显著增加每个 Web 请求的大小。- AppCache 是构建离线应用的好方法？
答案👈
错。AppCache 即将被废弃⚠️存储机制选择
应该如何在客户端上存储数据，并缓存重要的程序资源呢？
虽然浏览器中有多种存储机制可供选择，但它们能使用的范围有限，并且可能会导致严重的性能问题。如果需要存储大量数据，下面两种方式可能是最佳选择：
1. CacheStorage API
尽管 CacheStorage API 仍然是一个实验中的功能，但在 PWA 应用中已经广泛使用。详细信息可以在 MDN 上查看。
其主要作用是缓存静态程序资源：HTML、Javascript、CSS文件，确保它们始终可用。
2. IndexedDB
使用 IndexedDB，可以存储各种数据，如文章内容、用户文档、设置等。
现代浏览器都已支持 IndexedDB 和 CacheStorage API，它们都是异步的，不会阻塞主线程。可以从 Window 对象、Web Workers 和 Service Workers 中访问它们，因此可以在代码的任何地方使用它们。
存储限制
如果需要在客户端上存储大量数据，你可能会担心存储限制问题。对于同一来源，各大现代浏览器存储限制信息如下：
| 浏览器 | 存储限制 | 备注 |
|---|---|---|
| Firefox | 2GB | |
| Safari | 1GB | 达到限制后提示用户增加限制 |
| Chrome | 总磁盘空间的80%，每个来源只能使用其中的75% |
在许多浏览器中，可以使用 Storage Manage API 来确定可用的存储量以及已使用的存储量。下面是在 Chrome 浏览器上的测试：
其中 quota 代表可用存储量，usage 为已使用存储量。
如果超出配额时该怎么办？
在超出配额的情况下，IndexedDB 和 Cache API 都会引发一个名为 QuotaExceededError 的 DOMError。以 Cache API 为例：
try {
const cache = await caches.open('my-cache')
await cache.add(new Request('/sample.jpg'))
} catch (err) {
if (err.name === 'QuotaExceededError') {
// Fallback code
}
}
在超出配额时，写操作将以 QuotaExceededError 拒绝。
当磁盘空间不足时，浏览器通常会自动从最近最少使用（LRU）的来源中删除数据，直到缓解存储压力为止，当然这种情况很少发生。Firefox 和其他基于 Chromium 的浏览器运作方式上基本相同（LRU 策略），Safari 稍有不同，当存储空间不足时，将阻止任何新内容被写入[1]。
结论
现在的计算机通常都有大型硬盘驱动器，所以测试超出配额的故障有些困难。因此，可以放心使用 CacheStorage API 和 IndexedDB，它们可以有效地存储应用程序需要运行的所有资源。
参考资料
[3]developer.mozilla.org/zh-CN/docs/…
本文由推啊前端团队 @Winter97 同学整理
