How to save and retrieve images from localStorage

Last updated: October 13, 2022.

You may think of localStorage as exclusively the domain of text data. After all, it is only possible to save string data there.

But, with a little help from the FileReader API, it is also possible to use it to store image files and retrieve them later on another page.

Converting an image to string format

Using JavaScript’s native FileReader, it is possible to read an image and output its content as a data URL.

A data URL is just like a regular URL except that it doesn’t point to an external resource. Instead, the image data is contained in data URL! (so they tend to be quite long).

Below is how you can read in a user-selected file using the FileReader. So you can see that its working, the data URL is set as the src of a new image element:

<input type="file" id="file-input-element">

<script>

const inputEl = document.getElementById('file-input-element');
// Gets input element

inputEl.addEventListener('change' , () => {
// Listens for new input file

    const file = inputEl.files[0]; 
    // Gets file from input element

    const fr = new FileReader();
    // Creates new FileReader object

    fr.readAsDataURL(file);
    // Set FileReader to output data as URL string

    fr.addEventListener('load', () => {
        // Waits for file reading to be complete

        const url = fr.result
        // Save result
        
        const img = new Image();
        img.src = url;
        document.body.appendChild(img);
        // Make URL src of image and append to DOM

    })

})

</script>

Now you have the image file expressed in string format, you are ready to save it to localStorage.

Saving and retrieving the image from localStorage

Now, that the image is expressed in string format, you can save it to localStorage in the normal way, using localStorage.setItem('key', value) syntax, where the data URL is passed in as the value.

inputEl.addEventListener('change' , () => {
    const file = inputEl.files[0]; 
    const fr = new FileReader();
    fr.readAsDataURL(file);

    fr.addEventListener('load', () => {
        const url = fr.result
        localStorage.setItem('image', url);
        // Saves image to localStorage
    })
});

Now, on another page, you can retrieve the data URL from localStorage and use it just like a regular URL:

const url = localStorage.getItem('image');
// Get data URL from localStorage

const img = new Image();
img.src = url;
document.body.appendChild(img);
// Set URL as src of image and append to DOM

Related links

• OpenJavaScript: Save data to the browser with localStorage and sessionStorage

---