Question

我喜欢在HTML5中，您可以将文本数据保存到本地数据库，甚至可以使用SQL来执行此操作。（http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/）

我有一个我为iPhone的MObile Safari编写的应用程序，除了图像外，它可以离线缓存所有内容。图像仍然必须从服务器下载，我不知道如何确保它们将保持缓存。理想情况下，我想将它们写入localStorage数据库。

我在考虑将图像写入画布，然后将其序列化为文本......任何想法？有没有更简单的方法呢？

理想情况下，我想用HTML和JavaScript完成所有操作，没有原生应用/目标-C。

Answer 1

查看html5中的应用程序缓存，它基本上完全符合您的要求（如果您想支持完全脱机的Web应用程序，它也是您想要使用的内容）。

或者你可以（有点难看）将图像转到画布，然后转到canvas.toDataURL（）以获取图像的数据URL，然后可以将其存储在普通数据库或离线存储api中。

Answer 2

您可以执行Google在Mobile GMail中所做的工作，并将其作为数据Url实施。这意味着以下内容将作为页面的一部分进行缓存（如果包含在cache.manifest中），因为它们不是外部的。之一：

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

或者：

<style type="text/css">
.Jd{background:#fff;width:100%;border-width:7px;-webkit-box-sizing:border-box;-webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUlJREFUeNpi/P//P4O+VwcfAwODGxDLATGITSr4BMSPgHjXxW0Vnxj1PNtFmBgZU/79/38MKHgBqoAoADQATEMdZQA0xwpozlwWEUFu7zfvvx4ACp5gIBOAXAekDgEN/yEqzOPD9P3nHwWoC6kBLnz99kue6eu3n4xAzg8Civ8jYXwu/vXt+y8GJgYagBFuKAuOSCEUabD0CYsgxmHifVjWQwYwb+KSJ2go0ABGAuHISMiCkZ5OBfm5mN9//MaBr1BBDjvkSMMSH2z8vBzMLI4Wqjzrdl7UA4qdwqOYkUhHGjhbqfOwxAaafjh0+q7fm3dfQK49B8RfSPUu0FIeIGUkIsTjBjKPEVhHyQO93zV96ZFXR8/c+/zkxYdfpBoqIyHAZm2ixJsZbSMGDM4ykKEgcREgzgRibSAWIiNu3gHxVSCeDsRvAAIMAK29e2M9JZVZAAAAAElFTkSuQmCCCg==") 9 7 8 7}
</style>

点击此处了解有关此主题的更多信息：http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 3

另见： http://www.w3.org/TR/offline-webapps/

在HTML5中，您可以通过编程方式将图像保存到缓存中吗？

4 个答案: