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.