Salvar Json no localStorage ou sessionStorage do navegador

Neste post vou deixar uma dica de como utilizar gravar Json no localStorage ou sessionStorage do browser

Wolmir Cezer Garbin por Wolmir Cezer Garbin - - Front-end - TUTORIAL

Última atualização em: | 14826 Visualizações

O localStorage ou sessionStorage permite que você grave informações no formato key/value ou em portugues, chave/valor no browser do usuário.

Porém existem situações que é importante gravar mais dados, para isso podemos utilizar json.

Porém, não é suportado a gravação direta de json no localStorage ou sessionStorage do browser.

Por isso precisamos converter a informação para texto antes de gravar e após recuperar precisamos transformar novamente em json para poder utilizar estes dados.



Convertendo json para texto no javasctipt

Considere o seguinte json:

var person = {name: 'Wolmir Garbin', blog: 'Receitas de Código'};

Se utilizarmos a variável person diretamente, temos um objeto, podemos acessar suas propriedades e trabalhar com estes dados.

Para obtermos apenas o texto deste objeto, precisamos converter da seguinte forma:

var textPerson = JSON.stringify(person);

Se imprimirmos a variável textPerson usando console.log(textPerson) temos apenas o texto do objeto json.

{"name":"Wolmir Garbin","blog":"Receitas de Código"}

Convertendo texto para json no javasctipt

Para converter novamente para objeto, utilizamos JSON.parse(), veja:

var person = JSON.parse(textPerson);

Entendendo como converter json para texto e texto para json, podemos utilizar este recurso para gravar dados úteis e complexos no localStorage ou sessionStorage do browser.

Gravando json no localStorage do browser

Seguindo no exemplo, para gravar o objeto person no localStorage do browser, podemos utilizar o seguinte código:

localStorage.setItem('person', JSON.stringify(person));

Note que o primeiro parâmetro é a chave e o segundo é o json convertido em texto.

Recuperando json do localStorage do browser

A mesma ideia se aplica para recuperar estes dados, basta obter o item usando a chave e transformar em json novamente:

JSON.parse(localStorage.getItem('person'));

Note que o getItem() espera apenas um parâmetro que é a chave.

Para fazer o mesmo com o sessionStorage utilizamos a mesma lógica.

Gravando json no sessionStorage do browser

sessionStorage.setItem('person', JSON.stringify(person));

Recuperando json do sessionStorage do browser

JSON.parse(localStorage.getItem('person'));

Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.


Publique seu post no Receitas de Código

Aguarde, estamos trabalhando para que você possa publicar sua postagem no Receitas de Código!