javascript - 在 HTML5 中本地存储图像

Question

我们正在开发这个网络图片库。我们正在规划一个与此类似的架构:

1 - 从服务器下载所有图像并将其存储在本地存储中(HTML5)

2 - 在图库中显示，就像从本地驱动器渲染一样

3 - 将图库中所做的任何编辑存储在本地驱动器中

4 - 单击“完成”按钮后，将所有更改信息上传到远程服务器

图像的数量将会更高，可能有数千个。我想检查一下上述是否可行。

从事该项目的团队表示，HTML5 本地存储在上下文中没有用处。他们指出，下载的图像始终会驻留在缓存中，无论如何都会导致性能下降，这是无济于事的。

这是真的吗？使用新的 HTML5 选项可以做些什么来优化此工作流程吗？

Answer 1

理论上，您可以对图像进行 Base64 编码并将结果字符串存储在本地存储中。不过，执行此类操作的唯一原因是将编辑后的图像保留在“离线”模式下，这样他们就可以关闭并重新打开浏览器，而不会丢失所做的任何更改。否则，这些编辑可以存储在内存中，一旦用户完成，就可以保留回服务器。

至于原始图像本身，您的团队成员是正确的，下载文件后，浏览器将不会尝试再次获取它，除非 header 中的到期日期已过。

<小时/>

编辑

找到另一个描述该过程的 stackoverflow 帖子的链接:
How to save an image to localStorage and display it on the next page?