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
Última atualização em: | 16074 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.