Entonces, básicamente, necesito cargar una sola imagen, guardarla en localStorage y luego mostrarla en la página siguiente.

Actualmente, tengo mi archivo HTML subido:

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

Que utiliza esta función para mostrar la imagen en la página.

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]);
    }
}

La imagen se muestra instantáneamente en la página para que el usuario la vea. Luego se les pide que completen el resto del formulario. Esta parte está funcionando perfectamente.

Una vez que se completa el formulario, luego presionan el botón 'Guardar'. Una vez que se presiona este botón, guardo todas las entradas de formulario comolocalStorage instrumentos de cuerda. Necesito una forma de guardar también la imagen comolocalStorage ít.

El botón Guardar también los dirigirá a una nueva página. Esta nueva página mostrará los datos de los usuarios en una tabla, con la imagen en la parte superior.

Tan sencillo y simple, necesito guardar la imagen enlocalStorage una vez que se presiona el botón 'Guardar', y luego preste la imagen en la página siguiente desdelocalStorage.

Encontré algunas soluciones comoeste violín yeste artículo en moz: // a HACKS.

Aunque todavía estoy extremadamente confundido sobre cómo funciona esto, y solo necesito una solución simple. Básicamente, solo necesito encontrar la imagen víagetElementByID una vez que se presiona el botón 'Guardar', y luego procesar y guardar la imagen.