We can save images to localStorage using JavaScript temporarily and load them to the web page without any server. Even if our users don't have an internet connection, we can get the image from localStorage and display it.
There are 3 steps to store an image in the localStorage in JavaScript:
- Step 1: Get the image file from the
<input>element by listing to thechangeevent. - Step 2: Use
FileReader()constructor function to convert the image file into a data URL. - Step 3: Save the data URL string to localStorage with the
setItem()method in JavaScript.
Following these steps, you can save a single image to the localStorage. But if you need to store multiple images, you can do that as well.
After storing the image, you can extract it from the storage and display it on the webpage any time you want with the getItem() method.
I will show you how to store single or multiple images and get them from the localStorage in order to show them on the page.
Save an Image to localStorage in JavaScript
You have seen 3 steps that you need to follow. Now we will discuss those steps in detail with examples.
Step 1: Get an Image File Using The change Event
Before storing an image file, you need to get the file from your user. You can use the <input> element to select a file.
When a user selects an image file, JavaScript fires a change event. You have to listen to that event to get the selected file from the <input> element.
<div>
<input type="file" id="thumbnail">
</div>
Here I have an <input> element with an id. I can use this id value to grab this element using JavaScript and listen to the change event.
Inside the event callback function, you will have access to the event object with the selected file.
const input = document.getElementById('thumbnail');
input.addEventListener('change', (event) => {
const image = event.target.files[0];
});
I am using the addEventListener() method to listen to the event. I can get the image file from the target property available in the event object.
You can perform file extension validation in JavaScript to confirm that the selected file is an image.
There are also other file validation methods in JavaScript that you should consider. Like you should check for the file size. Because you can only store between 2 MB to 10 MB in the localStorage.
Step 2: Convert The Image File Into a Data URL
It's time to convert the image into a data URL after you have the file. Because we can not directly save an image in the localStorage.
You can only store string data in it. The data URL converts the image into a string. JavaScript has the FileReader() constructor function for that.
const input = document.getElementById('thumbnail');
input.addEventListener('change', (event) => {
const image = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
});
When we call this constructor function, it returns an object. Now to get the data URL from your image, you need to call the readAsDataURL() method from the reader object.
This method will accept the image file as its argument. Now, you can get the data URL string from the reader object.
Also Read: Get File Extensions in JavaScript: 3 Easy Ways For You
Step 3: Save The Data URL String in localStorage
After converting the image file into a string. We will get the string and save it in the localStorage using setItem() method.
When we call the readAsDataURL() method with our image file and the conversion is finished, this method fires the load event.
const input = document.getElementById('thumbnail');
input.addEventListener('change', (event) => {
const image = event.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(image);
reader.addEventListener('load', () => {
localStorage.setItem('thumbnail', reader.result);
});
});
You can use the addEventLister() method to listen to the load event. When we get this event it means we have our data ready on the reader object.
Inside the event callback function, we can access the data URL string using the result property in the reader object.
I am saving that string in the localStorage with the thumbnail key. When you want to get this data from the localStorage, you will use this key.
Load Images From localStorage in JavaScript
You have to access the image stored in the localStorage using the key. When we save anything to the localStorage, we do it as a key/value pair.
When we call the getItem() method by passing a key as its argument, it returns the value associated with that key.
<div>
<img id="preview" src="" alt="thumbnail">
</div>
I have a <img> tag without the src value in my HTML file where I want to display the image. Using JavaScript, I will set the src value dynamically.
In the previous section, we stored a single image with the thumbnail key. Let's see how to get this image and display it on the webpage.
const thumbnail = localStorage.getItem('thumbnail');
const previewImage = document.getElementById('preview');
if (thumbnail) {
previewImage.setAttribute('src', thumbnail);
} else {
previewImage.setAttribute('src', 'default.jpg');
}
I am getting the image data URL from the localStorage by giving the key to the getItem() method.
If the localStorage has the data with the thumbnail key, I will use it as the src value of our <img> tag. But if there is no data in the storage, you can set a default image.
Also Read: How to Remove Elements From an Array in JavaScript
Save an Array of Images in localStorage
In the previous section, you have seen how to store a single image in the localStorage. But you can also select multiple images using the <input> tag.
Therefore you can save an array in the localStorage with multiple images. Let's see how to do this in this section.
When we select multiple images using the <input> tag, there are a few things that we need to change. Instead of getting a single image file from the target property, we will get all the images.
const input = document.getElementById('thumbnail');
input.addEventListener('change', (event) => {
const images = event.target.files;
for (const image of images) {
const reader = new FileReader();
reader.readAsDataURL(image);
reader.addEventListener('load', () => {
const imagesArray = localStorage.getItem('images');
let images = [];
if (imagesArray) {
images = [...JSON.parse(imagesArray)];
images.push(reader.result);
} else {
images.push(reader.result);
}
localStorage.setItem('images', JSON.stringify(images));
});
}
});
It will return an array of image files. You can loop through those files using the for...of statement. You can convert each image file into a data URL inside this loop.
When a data URL is ready, I am getting an array of images from localStorage using the images key in the getItem() method.
If we get the array from the getItem() method, we will parse the value with JSON.parse() method. Because this method will return the array as a string.
Then we will copy the array items in the images array using the spread operator in JavaScript. Now we can push the new data URL to this array from reader.result property.
If there is no previously saved data in the localStorage, we can directly push our new data URL to the images array.
Finally, we can save the images array to our localStorage using setItem() method with the images key. But we have to convert the array into a string with JSON.stringify() method.
const images = JSON.parse(localStorage.getItem('images'));
images.forEach((image) => {
// Display the image
});
If you want to display the array of images, you again have to parse the value that getItem() returns using the JSON.parse() method.
Because we converted the array into a string. This method will convert the string into an array. Now you can loop through the array and display the images accordingly.
Conclusion
It is a 3 steps process from getting an image file to saving it to the localStorage. You have seen each of them in detail with code samples.
The main limitation of this process is the storage capacity in the localStorage. You can't store as many images as you want. It allows data size from 2 MB to 10 MB.
That's why you should check the file size before saving the image in the localStorage using JavaScript.
