理解如何应用JavaScript中的Cache API缓存资源。

Cache API容许服务工作者对要缓存的资源（HTML页面、CSS、JavaScript文件、图片、JSON等）进行管制。通过Cache API，服务工作者能够缓存资源以供脱机应用，并在当前检索它们。

检测Cache反对

查看 caches 对象在 window 中是否可用。

let isCacheSupported = 'caches' in window;

caches 是 CacheStorage 的一个实例。

创立/初始化Cache

咱们能够应用 open 办法创立一个具备 name 的缓存，这将返回 promise。如果缓存曾经存在，则不会创立新的缓存。

caches.open('cacheName').then( cache => {});
  • 你不能拜访为其余源(域)设置的缓存。
  • 你正在创立的缓存将为你的域创立。
  • 你能够为同一个域增加多个缓存，能够通过 caches.keys() 拜访。

将我的项目增加到缓存

能够应用三种办法 add，addAll，set 来缓存资源。 add() 和 addAll() 办法主动获取资源并对其进行缓存，而在 set 办法中，咱们将获取数据并设置缓存。

add

let cacheName = 'userSettings'; let url = '/api/get/usersettings';caches.open(cacheName).then( cache => {   cache.add(url).then( () => {       console.log("Data cached ")    });});

在下面的代码中，外部对 /api/get/usersettings url的申请已发送到服务器，一旦接管到数据，响应将被缓存。

addAll

addAll 承受URL数组，并在缓存所有资源时返回Promise。

let urls = ['/get/userSettings?userId=1', '/get/userDetails'];caches.open(cacheName).then( cache => {cache.addAll(urls).then( () => {       console.log("Data cached ")    });});

Cache.add/Cache.addAll 不缓存 Response.status 值不在200范畴内的响应，Cache.put 能够让你存储任何申请/响应对。

put

put 为以后的 Cache 对象增加一个key/value对，在 put 中，咱们须要手动获取申请并设置值。

留神：put() 将笼罩先前存储在高速缓存中与申请匹配的任何键/值对。

let cacheName = 'userSettings';let url = '/api/get/userSettings';fetch(url).then(res => {  return caches.open(cacheName).then(cache => {    return cache.put(url, res);  })})

从缓存中检索

应用 cache.match() 能够失去存储到URL的 Response。

const cacheName = 'userSettings'const url = '/api/get/userSettings'caches.open(cacheName).then(cache => {  cache.match(url).then(settings => {    console.log(settings);  }});

settings 是一个响应对象，它看起来像

Response {  body: (...),  bodyUsed: false,  headers: Headers,  ok: true,  status: 200,  statusText: "OK",  type: "basic",  url: "https://test.com/api/get/userSettings"}

检索缓存中的所有我的项目

cache 对象蕴含 keys 办法，这些办法将领有以后缓存对象的所有url。

caches.open(cacheName).then( (cache) => {   cache.keys().then((arrayOfRequest) => {       console.log(arrayOfRequest); // [Request,  Request]  });});

arrayOfRequest是一个Request对象数组，其中蕴含无关申请的所有详细信息。

检索所有缓存

caches.keys().then(keys => {  // keys是一个数组，其中蕴含键的列表})

从缓存中删除我的项目

能够对 cache 对象应用 delete 办法来删除特定的缓存申请。

let cacheName = userSettings; let urlToDelete = '/api/get/userSettings';caches.open(cacheName).then(cache => {  cache.delete(urlToDelete)})

齐全删除缓存

caches.delete(cacheName).then(() => {   console.log('Cache successfully deleted!');})

起源：https://medium.com/javascript-dots，作者：Jeep，翻译：公众号《前端全栈开发者》