localStorage and local files

We are planning to create a image manipulation service in HTML5. One goal is that the service would work for anonymous users.

• User adds a image (open file dialog / drag and drop)
• User manipulates image in the browser
• User saves the result

Now, the trick here is that the browser may die under us on any moment (user exists, laptop battery is empty, etc...) We'd like to have some kind of auto-save here which records the progress. This means keeping the track of images added on the page, preferably in offline manner.

The question is, can w开发者_开发问答e somehow locally auto-save files and images user has added on the page, or are we forced to make user re-enter all images he/she has added on the page in the case page must be reloaded? Does localStorage has support for local file objects or references?

Yes, you can implement auto-save feature.

You might use HTML5 Canvas API to let users to manipulate image in the browser. Then you can use toDataURL method to get the data URL of the image. After get that, you can save it to localstorage. We can save just strings in localstorage for now. Spec says object can be saved in localstorage but most browsers don't support it.

The setInterval method can be used to save the image periodically.

Not possible:

http://dev.w3.org/2006/webapi/FileAPI/#lifeTime