使用 JavaScript 访问缓存响应标头答案

【问题标题】：Access cache response headers with JavaScript使用 JavaScript 访问缓存响应标头
【发布时间】：2019-10-04 16:35:49
【问题描述】：

我正在尝试从我的缓存元素之一访问响应标头“日期”。

如图所示，我的请求没有返回正确的时间戳。相反，它返回null，我不知道为什么。

这是我使用的代码：

var cachedFile = "https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";
caches.open("dynamic-content").then(cache => {
  cache.match(cachedFile).then(response => {
    if(! response){
        console.log("not found");
    }else{
        var element = response.headers.get('date');
        console.log(element);
    }
  })
})

我的目标是删除旧的缓存文件。不使用工作箱或任何插件。如果有人知道方法，我很高兴得到启发；）

【问题讨论】：

试试response.headers.get('Date')。如果还是不行，你可以试试console.log(response.headers)看看头对象里面有什么。
'Date' 也返回 null，并且 response.headers 返回一个对象，显示我有哪些选项（“append”、“delete”、“get”）-> 但它没有显示缓存文件的实际头内容

标签： javascript caching response-headers

【解决方案1】：

尝试（您的请求返回空标头）

let cache={};

var url = "https://cors-anywhere.herokuapp.com/https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";

async function load(url) {
  let c = cache[url];
  if(c) {
    console.log('Cached headers',c.res.headers);
  } else {
    let res = await fetch(url);
    c = cache[url] = {
      res,
      pic: await res.blob(),
    }
  }
  image.src=""; 
  image.src = URL.createObjectURL(c.pic);
}

function start() {
  load(url);
  btn.innerText="Load from cache";
  
}

<button id="btn" onclick="start()">Load</button><br>
<img id="image" height="150"/>

【讨论】：