0

Estou tentando salvar as alterações do código html da minha página feita por uma interação de javaScript. Mais precisamente quero que a tabela que crio com js mantenha salva as alterações em html.

localStorage.setItem("resposta", document.querySelector("#tabela-anagrama"));

localStorage.getItem("resposta")

Quando eu faço um console.log para ver o que está gravado no localStorage a resposta é [object HTMLTableRowElement]

Minha dúvida é a seguinte como eu faço para gravar o código html e fazer com que quando eu atualize a página a tabela volte já com as alterações gravadas?

1 Resposta 1

0

Utilize o atributo outerHTML. Ela irá retornar o código HTML do elemento.

localStorage.setItem("resposta", document.querySelector("#tabela-anagrama").outerHTML);

Desvantagem:

Isso tem uma desvantagem, caso você queira adicionar muitos dados, o método setItem irá retornar uma Exception devido a falta de espaço.

Segue uma tabela com o tamanho disponível, por navegador, para o Local Storage:

Capacidade detalhada para vários browsers.

3
  • Dependendo do conteúdo as vezes o localStoage não salve corretamente o conteúdo por que parece convertelo para String, e se mandar como base64 localStorage.setItem("resposta",btoa(document.querySelector("#tabela-anagrama").outerHTML)); depois pra recuperar bastaria: atob(localStorage.resposta);?
    – RpgBoss
    Commented 3/03/2018 às 4:15
  • 1
    @RpgBoss O problema que o base64 quase sempre é maior que o código em si e também ele é uma String. Fiz um teste com a tabela a acima, e não ocorreu erros. Mas adicionei a desvantagem do limite de armazenamento (acredito que ele não vá ter erros causa disso). Commented 3/03/2018 às 4:29
  • Realmente faz bastante sentido, então no fim acho que nem compensa salvar o conteudo HTML, somente os valores e conteúdo, não sei o que acontece se houver muitas quebras de linha.
    – RpgBoss
    Commented 3/03/2018 às 4:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .