javascript - 在本地存储中存储 .jpg 文件

Question

我正在尝试找到一种方法将我网站上的 .jpg 文件存储到本地存储中以提高网站速度。理论上很简单:把picture.jpg转成base64字符串，用setitem存入localstorage。要再次显示图片，只需从本地存储加载 base64 字符串并解码回 jpg。但是，一如既往，实践更加困难。我试图找到一种使用 html5 或 javascript(没有 php!)将 .jpg 文件即时转换为 base64 的方法。是否有人遇到了同样的问题并且能够找到解决方案并可以共享代码？

Answer 1

我也支持使用 HTML5 缓存 list ，它也支持离线情况，并且专为您的问题而设计。不要将本地存储与 base64 一起使用，因为:

• Base64编码增加文件大小to 137% (!)
• 该算法会减慢您的应用程序，因为不仅互联网速度限制了您的应用程序，而且 javascript 的执行速度也无法像在台式计算机上那样快。在我对移动电话的测试中，我遇到了常见 javascript 的问题，因此我会将 javascript 减少到最低限度，并且不需要您的上下文。
• 本地存储并非始终受支持，而且也有限制!

对于缓存 list ，您可以查看 w3.org - Cache Manifests也在html5 Rocks有初学者指南。

如果你不想使用 HTML5 chache manifest，你应该尝试尽可能地提高速度，在 stackoverflow 上的许多帖子中都有描述，我喜欢指向 the presentation 的链接。在后about increasing Math Object