En HTML5, pouvez-vous enregistrer une image dans le cache par programmation?

J'aime qu'en HTML5, vous pouvez enregistrer le texte des données à une base de données locale, et peut même utiliser SQL pour le faire. (http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)

J'ai une application que j'ai écrit pour l'iPhone MObile de Safari qui met en cache le tout en mode hors connexion, sauf pour les images. Les images doivent encore être téléchargés à partir du serveur, et je ne sais pas comment faire pour s'assurer qu'ils resteront en mémoire cache. Idéalement, j'aimerais écrire pour le localStorage base de données.

Je pensais à l'écriture d'une image de la toile, puis la sérialisation que comme texte... des idées? Est-il un moyen plus facile de faire cela?

Idéalement, j'aimerais faire tout cela avec de HTML et de JavaScript, pas de native apps/objective-C.

source d'informationauteur JayCrossler

  1. 11

    Regarder le cache de l'application en html5, qui fait exactement ce que vous voulez (c'est aussi ce que vous souhaitez utiliser si vous voulez soutenir complètement hors ligne d'applications web).

    Vous pouvez aussi (un peu moche)daw l'image sur la toile, alors, sur la toile.toDataURL() pour obtenir des données d'url pour l'image, que vous pouvez ensuite stocker dans la base de données normale ou en mode hors connexion api de stockage.

  2. 4

    Que vous pourriez faire ce que Google ne Mobile de GMail et de mettre en œuvre des données de l'Url. Cela signifie que les éléments suivants devraient être mis en cache dans le cadre de la page (si inclus dans le cache.le manifeste), car ils ne sont pas externes. Soit:

    <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">

    Ou:

    <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>

    Lire plus sur le sujet ici: http://www.websiteoptimization.com/speed/tweak/inline-images/

  3. 2

    Vous pouvez stocker les images à l'aide de la Les données de l'INTERFACE utilisateur régime dans le HTML5 de base de données.