JavaScript中的手动文件缓存

Posted 2021-04-13

我有一个基于html的项目，可与其他网站的媒体合作，使用他们的直接链接嵌入图像/歌曲/视频。到目前为止，该系统运行良好，但我希望做出改变：由于观众反复访问大量资产，以受控方式缓存它们似乎更为理想，因此每当弹出某些媒体时，您不需要每次从原始服务器获取它。我之前从未这样做过，所以我不知道是否以及如何做到这一点。

使用过度简化：我在图像元素中有一个名为“image.png”的嵌入式照片，每当我打开网站时都会显示该照片。目前它只是定义为：

<img scr="https://foo.bar/image.png">

完美的工作！但是我想确保在访问我的网站时，您不需要每次都从foo.bar获取该图像：下载一次后，您将把它保存在本地目录中，脚本可以从中获取并工作与文件独立。例如，对于Firefox，此子目录将位于~/.mozilla/firefox/my_profile目录中。理想情况下，它可以使用固定名称定义，因此无论从哪个URL打开网站，它都使用相同的缓存路径，而不是生成自己的项目的每个镜像。

首先，我的脚本必须告诉浏览器下载https://foo.bar/image.png并将其存储到此缓存子目录中。之后，它需要生成一个链接以直接从该子目录嵌入它，因此我使用的URL现在将是以下形式：

<img scr="file://path_to_cache/image.png">

我如何以一种兼容流行的网络浏览器的方式做这两件事？作为奖励，知道我是否可以限制此缓存目录的大小将是有用的，因此一旦达到100 MB，将删除最旧的项目以保持在该大小之下。

答案

您可以替换地将缓存添加到服务器的.htaccess文件中。该站点解释了如何：https://www.siteground.com/kb/leverage-browser-caching/但是，这不会将图像缓存在用户的计算机上，而是将其缓存在服务器上以便更快地响应。

您可以使用服务工作者在用户的计算机上缓存图像。 https://developers.google.com/web/ilt/pwa/lab-caching-files-with-service-worker

希望这可以帮助。