将本地图像或图像路径保存在本地存储中？

Question

我正在开发一个书签（从书签触发的Javascript），它通过网页覆盖图像，以检查html是否与设计一致。 （它使用不透明度）

我想基于每个网址保存参考图像。据我所知，我有三个选择：

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

我目前正计划使用本地存储来保存图像。优点是，如果原始图像被删除并且它在chrome中的不同计算机之间同步，它就可以工作。我不知道有什么缺点。在IE7中我不需要像素完美，因此浏览器支持很好。

最好的方法是什么？

Answer 1

当然，您可以将图片和/或网址保存到localStorage。

但是，由于localStorage只需要string，您需要先将图像转换为data-url，方法是从服务器提供图像，或者通过使用图像转换图像canvas（请注意，画布通常只能设置来自相同原点的图像，当然，如果没有polyfill，IE7中不提供画布。）

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

图像将在您提供时存储（除非您使用画布中的jpeg重新缩放和重新压缩），因此像素化或质量降低不应成为问题。

IE7 does not support localStorage因此，在这种情况下，您需要恢复为UserData（限制为4 MB IIRC）或使用网址添加Cookie。

虽然 -

如果将原始图像保存在本地并不重要，我宁愿建议在图像中使用延迟过期数据来提供图像。

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