Caches

撰写时间：2024-12-25

修订时间：2024-12-26

概述

Caches是HTML 5中所定义的一种本地存储的工作机制。

全局对象caches

在Web环境中，window有一个名为caches的属性，即是用以建立缓存的对象。

pc.log(caches);

caches的类型为CacheStorage，只有match, has, open, delete, 及keys等少数几个方法。

查看caches所有键名

通过调用caches的keys方法，可以查看所有的键名。

caches.keys() .then(keys => pc.log(keys));

因为caches是在浏览器的本地存储上建立的一种存储机制，因此，对于每个浏览器来讲，它是全局性的。如果之前我们曾使用过caches来存储特定数据，则上面的代码会将所使用过的键名都显示出来。

删除caches所有键

因为caches是全局性的对象，为避免受之前的影响，在这里，我们希望删除之前所有曾经使用过的键。

await caches.keys() .then(keys => { keys.forEach(keyName => { pc.log(keyName); caches.delete(keyName); }); })

因本站已在本目录上建立起了Service worker，以及受到下面各节代码的影响，当上面代码运行后，每刷新网页2次，都会看到相关的键名又会自动冒出来。

新建或打开键

可以调用caches的open方法来打开一个键，此时将返回一个类型为Cache的对象。如果要打开的键名不存在，则先创建一个键再打开。

caches.open('shell-v1') .then(cache => { pc.log(cache); return cache.keys(); }) .then(requests => { requests.forEach((request) => { pc.log(request.url); }); })

特定键名的Cache对象，其各个方法与Cache比较相像，但其keys方法返回的不再是字符串，而是Request对象。

添加键值

caches.open("temp-v1") .then(cache => { let resources = [ 'index.php' ]; cache.addAll(resources); return cache.keys(); }) .then(requests => { requests.forEach((request) => { pc.log(request.url); }); });

add或addAll方法将导致在内部通过调用fetch函数加载后，再将返回的Responses添加进缓存中。

这就是Caches的本质，它的键名是Request对象，键值是Response对象，即将指定网页地址的网页内容保存进缓冲区，当用户访问这些缓冲区中的内容时，可直接从缓冲区中读取，即使没有网络连接。