How to save img uploaded into localStorage?

Question

I'm working harder on my extension and I've troubles to save img in localStorage and delete it from button.

here is part on my HTML:

<a href="#" id="die">DELETE IMG</a>
<input type='file' id="imgInp" />
<div id="canvas">
    <img id="uploaded" src="#" alt="your image" />
</div>

and script that I tried to edit:

function readURL() {

     $('#uploaded').attr('src', '').hide();
        if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) {
            $('#uploaded').attr('src', e.target.result) 
            localStorage.setItem('img', e.target.result);
        });
        reader.readAsDataURL(this.files[0]);
    }
}

$('#uploaded').load(function(e) {       
    $(this).show();
}).hide();

$("#imgInp").change(readURL);

$('#die').click(function() {
    localStorage.clear();
    window.location.reload();
});

Here is the jsfiddle with the code

Any help will be appreciated.

Answer 1

LocalStorage only supports strings, so what you need to do is turn the image into a Data URL. You can do it by loading it into canvas element and then saving in local storage . Have a read on these :-

How to save an image to localStorage and display it on the next page?

https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/