Day2 Episode 11: Storaged for the we

网友投稿 534 2022-05-29

[没有子分类]

【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

Day2 Episode 11: Storaged for the we

// 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除外)

视频

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

上一篇:Spark入门到精通视频学习资料--第三章:Spark进阶(2讲)
下一篇:【直播资讯】手机的存储空间、运行速度都会受到硬件本身的限制该怎么办?
相关文章