In HTML5, puoi salvare un'immagine nella cache a livello di codice?

Question

Adoro il fatto che in HTML5 è possibile salvare i dati di testo in un database locale e persino usare SQL per farlo. ( http://webkit.org/blog/126 / webkit-fa-HTML5-client-side-database di memorizzazione / )

Ho un'app che ho scritto per il MObile Safari dell'iPhone che memorizza nella cache tutto offline tranne le immagini. Le immagini devono ancora essere scaricate dal server e non so come garantire che rimarranno memorizzate nella cache. Idealmente, vorrei scriverli nel database localStorage.

Stavo pensando di scrivere un'immagine sulla tela e quindi di serializzarla come testo ... qualche idea? C'è un modo più semplice per farlo?

Idealmente, vorrei fare tutto questo con HTML e JavaScript, senza app native / goal-C.

Answer 1

Guarda la cache dell'applicazione in html5, che fa praticamente esattamente quello che vuoi (è anche quello che vuoi usare se vuoi supportare applicazioni web completamente offline).

In alternativa potresti (un po 'brutto) masticare l'immagine su tela, quindi su canvas.toDataURL () per ottenere un url di dati per l'immagine, che puoi quindi archiviare nel normale database o API di archiviazione offline.

Answer 2

Potresti fare ciò che Google fa in Mobile GMail e implementarlo come Url di dati. Ciò significa che il seguito verrà memorizzato nella cache come parte della pagina (se incluso in cache.manifest), poiché non sono esterni. O:

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

o

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

Ulteriori informazioni sull'argomento qui: http://www.websiteoptimization.com/ velocità / Tweak / linea-images /

Answer 3

È possibile memorizzare le immagini utilizzando Schema UI dati nel database HTML5.

Answer 4

vedi anche: http://www.w3.org/TR/offline-webapps/