Day2 Episode 11: Storaged for the we

[没有子分类]

 【Chrome web.dev Live 2020 总结】Day2 Episode 11: Storage for the we

§ 11.了解浏览器存储

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

§ 11.1 常见的存储技术

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

image.png

§ 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

}

运行结果：

image.png

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

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

Chrome

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

IE10+

阻止新的数据写入

Firefox

同Chrome

Safari

只存7天（已装PWA除外）