【Chrome web.dev Live 2020总结】第2天第11集：网络存储

11.了解浏览器存储

在用户浏览器缓存关键资源可以大幅提升页面浏览性能，增强页面可用性，保证关键页面脱机浏览。在存储技术层出不穷的今天，如何选用合适的存储技术至关重要。下面就谈谈如何选取适合自己项目的存储技术

11.1 常见的存储技术

若想了解现行热门的存储技术，Chrome浏览器中F12->Application，查看左侧的Storage即可

11.1.1 Local Storage

不推荐

Local Storage为同步的，可能阻塞主程序从而导致性能问题

 11.1.2 Session Storage

不推荐

Session Storage与Local Storage类似，都是同步的，都可能导致性能问题。不同点在于Session Storage会跟随会话，页面会话结束对应的Session Storage也会被清除

 11.1.3 IndexedDB

适用于存储少量，需要快速检索的数据场景。

11.1.4 Web SQL

不推荐

对标IndexedDB的竞争规范，不同点在于IndexedDB为索引表系统，Web SQL是关系型数据库。Web SQL规范已于2010年废弃

11.1.5 Cookies

不推荐

Cookie曾一度用于客户端数据的存储，随着新技术的出现而逐渐废弃。由于服务器指定Cookie后，浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销（尤其是在移动环境下）

11.1.6 AppCache

不推荐

AppCache更新机制存在硬伤，存储大小也不尽如人意。此特性已被废弃

 11.1.7 ServiceWorker的Cache API

适用于缓存静态资源场景

请注意此特性IE不兼容。按照视频的说法，IE不算主流浏览器，可以忽略

11.1.8 小结

虽存储技术众多，但视频只推荐了其中两种，一个是IndexedDB，一个是ServiceWorker

11.2 浏览器的存储策略

 11.2.1 存储空间大小限制

Chrome

最多60%的总磁盘空间

IE10+

250MB，超过10MB会有提醒

Firefox

一个来源最多2GB

Safari

1GB，达到限制会提醒用户增加

11.2.2 如何查看可用的存储空间

通过StorageManager的相关API可以查看

代码如下：

1
if (navigator.storage && navigator.storage.estimate) {
2
  const quota = await navigator.storage.estimate();
3
  // quota.usage -> 已使用大小
4
  // quota.quota -> 最大可用大小
5
  const percentageUsed = (quota.usage / quota.quota) * 100;
6
  console.log(`你已经使用了可用存储的${percentageUsed}%.`);
7
  const remaining = quota.quota - quota.usage;
8
  console.log(`你还可以存储 ${remaining} bytes.`);
9
}

运行结果：

 11.2.3 浏览器自动清除存储策略

当存储大小超过浏览器限制时，不同浏览器针对新的写入会采取不同策略

Chrome

从最近使用最少源开始删除，只至不再超过限制

IE10+

阻止新的数据写入

Firefox

同Chrome

Safari

只存7天（已装PWA除外）