乐趣区

关于前端:JavaScript中的缓存API

jiezi

理解如何应用 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，翻译：公众号《前端全栈开发者》

退出移动版