HTML5 demo with localStorage and saving images and files in it

This is a demo page displaying how you can use localStorage to save image files in it as Data URLs. The first time you load this page the picture of the elephant is saved in localStorage, and for following page loads the same date, it uses the image stored in localStorage.

The second image of the rhino is read through an XMLHttpRequest as an ArrayBuffer, put into a Blob and then read out as a Data URL through a FileReader object.

In the base.js file you can see the code to achieve this.

All the code is available at GitHub, for this page and other related demos.

An elephant, with localStorage

A close up of an elephant — A mighty big elephant, and mighty close too!

Rhino with XMLHttpRequest and reading file data

A close up of a rhino — Rhinos are big!

Created by Robert Nyman
All demo code at GitHub.