如何使用javascript缓存背景图片？

Question

更改背景图片时，即使使用apache mod_expires模块，这些图片也不会缓存。

更改apache的mod_expires模块，循环遍历隐藏在z-index后面1x1px处的单独div中的所有图像。

这是我设法缓存图像的方式，直到关闭浏览器窗口之后，它们才会重新加载。 它循环遍历所有图像，创建一个HTML图像节点，该节点存储在缓存数组中。循环后，Javascript的垃圾回收器不会从缓存中删除图像。

const images = ["/img/1.jpg","/img/2.jpg","/img/1.jpg"];
const cache = Array();
for(const path of images){
  const img = document.createElement("IMG");
  img.src = path;
  cache.push(img);
}

是否可以将持久保存在浏览器缓存中的图像缓存？

Answer 1

您应该检查服务器是否正确设置了所有HTTP标头。在Firefox和Chromium中，您可以按F12，然后切换到“网络”标签。

但是据我所知，缓存头只是说是否可以缓存文件 。最后，由浏览器决定是否要缓存文件。如果浏览器不想缓存文件，我个人不会尝试找到解决方法。

但是一种解决方法是将图像保存在 localStorage javascript对象中。在我的系统上，每个网页的 localStorage 限制为5MB。