在本地存储中保存本地镜像或镜像路径

Save local image or image path in local storage?

本文关键字：镜像 路径 存储 保存      更新时间：2023-09-26

我正在制作一个bookmarklet(从书签触发的Javascript)，它将图像覆盖在网页上，以检查html是否与设计一致。(它使用不透明度)

我想以每个url为基础保存引用图像。据我所知，我有三个选择:

  • 将路径保存在cookie中
  • 将路径保存到本地存储
  • 将图像保存到本地存储

我目前计划使用本地存储来保存图像。优点是，即使原始图像被删除，它也可以在不同的电脑之间在chrome中同步。我不知道有什么缺点。我不需要IE7的像素完美，所以浏览器支持就可以了。

最好的方法是什么?

当然，您可以将图像和/或url保存到localStorage。

然而，由于localStorage只需要string，您需要首先将图像转换为data-url，要么通过从服务器提供图像，要么通过使用canvas转换图像(请注意，画布通常只能设置来自同一来源的图像，当然画布在IE7中不可用，没有填充)。

一个更好的方法可能是使用indexedDB或新的File API(目前支持很差，到目前为止只有Chrome)，它允许您请求大的存储空间，它可以直接保存图像(作为Blob)。

图像将被存储为您提供它们(除非您在画布中使用jpeg重新缩放和重新压缩)，因此像素化或质量降低应该不是问题。

IE7不支持localStorage，所以在这种情况下，您需要恢复到UserData(限制为4 mb IIRC)或使用url代替cookie。

虽然——

如果在本地保存原始图像不是那么重要，我宁愿建议在图像的头中提供过期数据。

这样它会一直保存在缓存中，直到用户删除它或者过期。如果你对服务器的流量有限制，那么localStorage/indexedDB可能是更好的选择。

相关文章：