强制 Ajax 获取缓存版本答案

【问题标题】：Forcing Ajax to get cached version强制 Ajax 获取缓存版本
【发布时间】：2013-07-03 18:17:34
【问题描述】：

我正在创建一个 Google-Chrome 扩展程序，我希望能够提取网站正在加载的一些图像并将它们放入扩展程序中。在某些情况下，这可能会导致对服务器的大量请求，从而有效地减慢它的速度。这些图像在用户访问页面时加载，因此扩展程序无需再次请求图像。有什么方法可以在不从服务器再次拉取数据的情况下获取数据？

【问题讨论】：

服务器没有发送适当的缓存头或者你的问题是什么？
这不是我的服务器。我无法更改缓存标头。看起来他们没有使用任何东西。
那我猜你应该尝试从你的扩展中覆盖/设置它们
这就是我想要做的......
@Bergi 从扩展中设置缓存控制头对缓存没有影响。

标签： javascript ajax google-chrome-extension browser-cache

【解决方案1】：

使用binary Ajax，您可以将图像作为Blob 对象拉取，FileReader 可以将其转换为base64 URL 字符串。

获取图像的二进制数据为ArrayBuffer，并将其存储在Blob中：

var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";

oReq.onload = function(oEvent) {
  var blob = new Blob([oReq.response], {type: "image/png"});
  // step 2 goes here...
};

oReq.send();

（根据规范，您也可以使用oReq.responseType = "blob" 立即将oReq.response 变为Blob，而不是ArrayBuffer。我不能100% 确定这是否真的受支持。）

阅读Blob 和FileReader：

var fr = new FileReader();
fr.onload = function(e) {
    var dataUrl = e.target.result;
    // step 3 goes here...
}
fr.readAsDataURL(blob);

最后，您将 URL 存储在 dataUrl 中。将其直接分配给图像元素的src 属性：
```
document.getElementById("myimg").src = dataUrl;
```
为避免将来执行提取，请将数据 URL 存储在 localStorage 或 IndexedDB 存储中。

【讨论】：

并没有完全解决问题，我的扩展仍然需要加载图像。问题是原始网页（不是我的代码）加载了该页面。然后，在页面加载后，我的扩展想要获取资源的缓存版本。只有当我的扩展程序必须从扩展程序中多次加载资源时，您的代码才会有帮助。