js的cache对象

PWA的兴起带动了对ServiceWorker的关注，而说到ServiceWorker又不得不谈一下cache，我们今天就简单说说cache的基本用法；

1.检查浏览器是否支持cache

if('caches' in window) {
// Some operations
}

2.创建cache对象

创建一个缓存对象的方法是使用caches.open()，并传入缓存的名称。

async function(){
  const CACHE_NAME = 'cache_test';
  // 这个caches.open方法返回一个Promise，其中的cache对象新创建出来，如果是以前创建过，就不重新创建。
  let cache = await caches.open(CACHE_NAME);
}

3.添加缓存数据

缓存的形式为Request对象数组，Request请求获取的响应数据将会按键值存储在缓存对象里。
有两个方法可以往缓存里添加数据：add 和 addAll。

async function(){
  const CACHE_NAME = 'cache_test';
  // 这个caches.open方法返回一个Promise，其中的cache对象新创建出来，如果是以前创建过，就不重新创建。
  let cache = await caches.open(CACHE_NAME);
  // 这个addAll方法可以接受一个地址数组作为参数，这些请求地址的响应数据将会被缓存在cache对象里。addAll返回的是一个Promise。
  cache.addAll(['/', '/admin')
  // add()方法可以接受一个自定义的Request
 cache.add(new Request('/page/1', { /*具体请求参数*/ }));
}

4.访问缓存数据

要查看已经换的请求数据，我们可以使用缓存对象里的keys()方法来获取所有缓存Request对象。

async function(){
  const CACHE_NAME = 'cache_test';
  // 这个caches.open方法返回一个Promise，其中的cache对象新创建出来，如果是以前创建过，就不重新创建。
  let cache = await caches.open(CACHE_NAME);
  // 这个addAll方法可以接受一个地址数组作为参数，这些请求地址的响应数据将会被缓存在cache对象里。addAll返回的是一个Promise。
  cache.addAll(['/', '/admin')
  // add()方法可以接受一个自定义的Request
  cache.add(new Request('/page/1', { /*具体请求参数*/ }));
  // 以数组形式
  let reqCacheData = await cache.keys();  

  console.log(reqCacheData)
  // [Request, Request]
  //展开
  //Request {method: "GET", url: "http://localhost:8080/", headers: Headers, destination: "", referrer: "", …}
  //还提供了两个遍历查看方法
  cache.match()
  cache.matchAll()
}

5.删除

删除缓存里的数据

  cache.delete('/page/a');

删除一个缓存对象

  cache.delete(CACHE_NAME);  

基本cache的api就是这些，至于用法，可以结合ServiceWorker，做出更好离线缓存效果。

参考