As you might know, localStorage is quite powerful when it comes to quickly storing information in the user’s web browser, and it has also been around in all web browsers a long time. But how do we store files in it?
Let’s start with some basic information about localStorage. When storing information in localStorage, you use key/value pairs, like this:
And to read it out, you just get the value of that key:
That’s all good and well, and being able to save at least 5 MB, you have a lot of options. But since localStorage is just string-based, saving a long string with no form of structure isn’t optimal.
The idea here is to be able to take an image that has been loaded into the current web page and store it into localStorage. As we established above, localStorage only supports strings, so what we need to do here is turn the image into a Data URL. One way to do this for an image, is to load into a canvas element. Then, with a canvas, you can read out the current visual representation in a canvas as a Data URL.
Let’s look at this example where we have an image in the document with an id of “elephant”:
Note: A word of warning here is that you might exceed the size available in localStorage, and the best way to control that is using try...catch.
Storing any kind of file
So thats great, we can use canvas to turn images into Data URL and save in localStorage. But what if we want a mechanism that works for any kind of file?
Then it becomes a bit interesting, and we will need to use:
Do an XMLHttpRequest for a file, and set the responseType to “arraybuffer”
Load the response, i.e. file, of the XMLHttpRequest into a Blob
Use FileReader to read that file and load it into the page and/or localStorage
Let’s look at a complete example where we request an image named “rhino.png”, save it onto a blob, use FileReader to read out the file and finally save that in localStorage:
Using “blob” as responseType
In the above example we used the responseType “arraybuffer” and a Blob to create something we could use for the FileReader. However, there’s also a responseType called “blob” which returns a blob directly that we can use with the FileReader. The above example would instead look like this then:
Web browser support
Supported since long in all major web browsers, including IE8.
Native JSON support
Same long support as localStorage.
Supported a long in most major web browsers, but only since IE9.
XMLHttpRequest Level 2
Supported in Firefox and Google Chrome since long, Safari 5+ and planned to be in IE10 and Opera 12.
Supported in Firefox and Google Chrome since long, and is planned to be in IE10. Also in Safari 6.0+ and Opera Opera 12.1+
Supported in Firefox and Google Chrome since long, Opera since 11.1 and is planned to be in IE10. Unclear about Safari.
Currently only supported in Firefox. Will soon be in Google Chrome and is planned to be in IE10. Unclear about Safari and Opera.
Checking and clearing localStorage
The easiest way to check what’s in localStorage:
Firebug: DOM tab, then scroll down to or search for localStorage
Google Chrome: Developer Tools, under the Resources tab
Robert is a Technical Evangelist for Mozilla and the Editor of Mozilla Hacks. He's a strong believer in HTML5 and the Open Web, has been working since 1999 with Front End development for the web - in Sweden and in New York City.
He regularly also blogs at http://robertnyman.com and loves to travel and meet people.