【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除外）

存储

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。