我正在制作一个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
可能是更好的选择。