Jak zapisać obraz do localStorage i wyświetlić go na następnej stronie?

Więc, w zasadzie, muszę przesłać pojedynczy obraz, zapisać go do localStorage, a następnie wyświetlić go na następnej stronie.

Aktualnie mam upload pliku HTML:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Który używa tej funkcji do wyświetlania obrazu na stronie

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Obraz jest natychmiast wyświetlany na stronie, aby użytkownik mógł go zobaczyć. Następnie są proszeni o wypełnienie reszty formularza. Ta część działa idealnie.

Po wypełnieniu formularza, następnie naciśnij przycisk "Zapisz". Raz to przycisk jest wciśnięty, zapisuję wszystkie wejścia formularza jako localStorage ciągi. Potrzebuję sposobu na zapisanie obrazu jako elementu localStorage.

Przycisk Zapisz skieruje je również na nową stronę. Ta nowa strona wyświetli dane użytkowników w tabeli, z obrazem na górze.

Tak proste i proste, muszę zapisać obraz w localStorage po naciśnięciu przycisku "Zapisz", a następnie wypożyczyć obraz na następnej stronie z localStorage.

Znalazłem takie rozwiązania jak to skrzypce i to artykuł w moz: / / a HACKS .

Chociaż nadal jestem bardzo zdezorientowany, jak to działa, i naprawdę potrzebuję tylko prostego rozwiązania. Zasadniczo, po naciśnięciu przycisku "Zapisz" muszę znaleźć obraz za pomocą getElementByID, a następnie przetworzyć i zapisać obraz.