使用缓存存储 API 保存自定义响应 [英] Saving a custom Response using the Cache Storage API

问题描述

I'm using Cache Storage to build an progressive web app ( PWA ). There is a custom object that I need to put into my cache, but the cache accepts Response objects as an argument. So my question is how to properly create Response object, that has the JSON in it. I know I can use other caching strategies ( localStorage or IndexedDB ) but I'm particularly curious about this case - saving custom JSON in cache as a request.

var myJSON = JSON.stringify({custom:"object"}); 
caches.open('cache-name').then(function (cache) {
  var response = new Response(); //My JSON should go into this Response obj. 
  return cache.put('cache-name', response);
});

解决方案

Sure; it's possible to do that if it makes sense for your web app. You can do it wherever the Cache Storage API is supported, i.e. either in a service worker or from the context of a controlled page. Here's a basic example:

const data = {
  1: 2,
  3: 4
};

const jsonResponse = new Response(JSON.stringify(data), {
  headers: {
    'content-type': 'application/json'
  }
});

caches.open('json-cache').then(cache => cache.put('/data.json', jsonResponse));

You can manually confirm that the data you expect is being stored via logging something like

caches.match('/data.json').then(r => r.json()).then(console.log)

这篇关于使用缓存存储 API 保存自定义响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！