Como salvar uma imagem no localStorage e exibi-la na próxima página?
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.