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

标签 javascript image html base64 local-storage

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

最佳答案

我也支持使用 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

关于javascript - 在本地存储中存储 .jpg 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9717189/

相关文章:

php - 如何使用 php 变量分配 javascript 变量或数组

javascript - 将数组参数传递给 XMLHttpRequest 对象

Javascript将数组中的所有内容替换为数组中的所有内容

php - 为聊天应用程序存储 "Users Online"列表(php/ajax)

python - 使用python复制文件

php - 有没有一种简单的方法可以在没有 javascript 的情况下在 PHP 中将图像大小设为 "get"?

image - 从车牌上删除多余的像素/线

javascript - 在 Vue.js 中防止@click 上的 anchor 标记重新加载页面

html - 如何创建一个到达文本栏之外的背景颜色突出显示框[提供的图片]

javascript - Controller 不使用 angularJS 渲染