I love that in HTML5 you can save text data out to a local database, and can even use SQL to do it. (http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)
I've got an app that I've written for the iPhone's MObile Safari that caches everything offline except for images. The images still have to be downloaded from the server, and I don't know how to ensure that they will stay cached. Ideally, I'd like to write them out to the localStorage database.
I was thinking of writing an image to the canvas, and then serializing that as text... any ideas? Is there any easier way to do this?
Ideally, I'd like to do this all with HTML and JavaScript, no native apps/objective-C.
Image caching essentially means downloading an image to the local storage in the app's cache directory (or any other directory that is accessible to the app) and loading it from local storage next time the image loads.
Implementing user personalization in scripts allows caching of the page's HTML. Then the scripts can modify the page after loading asynchronously. Beyond using JavaScript for personalization, The Gap is caching HTML.
Generally yes, images should be cached in at least memory, and depending on your app (how likely is it to be reused,etc) in memory and storage. If you want to support your 3rd point (displaying when offline), you need to do storage caching, and memory caching is optional but probably a good idea.
Look at the application cache in html5, that does basically exactly what you want (it's also what you want to use if you want to support completely offline web applications).
Alternatively you could (somewhat ugly)daw the image to canvas, then to canvas.toDataURL() to get a data url for the image, which you can then store in the normal database or offline storage apis.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With