Então, basicamente, preciso carregar uma única imagem, salvá-la no localStorage e exibi-la na próxima página.

Atualmente, tenho meu upload de arquivo HTML:

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

Qual usa esta função para exibir a imagem na 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]);
    }
}

A imagem é exibida instantaneamente na página para o usuário ver. Eles são então solicitados a preencher o restante do formulário. Esta parte está funcionando perfeitamente.

Quando o formulário estiver completo, eles pressionam o botão "Salvar". Quando esse botão é pressionado, salvo todas as entradas de formuláriolocalStorage cordas. Eu preciso de uma maneira de também salvar a imagem como umlocalStorage item.

O botão salvar também os direcionará para uma nova página. Esta nova página exibirá os dados dos usuários em uma tabela, com a imagem no topo.

Tão simples e simples, eu preciso salvar a imagem emlocalStorage uma vez que o botão 'Salvar' é pressionado, e então empresta a imagem na próxima página delocalStorage.

Eu encontrei algumas soluções comoeste violino eeste artigo no moz: // a HACKS.

Embora eu ainda esteja extremamente confuso sobre como isso funciona, e eu realmente só preciso de uma solução simples. Basicamente, eu só preciso encontrar a imagem viagetElementByID depois que o botão 'Salvar' é pressionado, processe e salve a imagem.