Como salvar um objeto na localStorage

Neste artigo veremos como salvar um objeto na localStorage – também como podemos atribuí-lo a uma variável resgatando da localStorage

Fala programador(a), beleza? Bora aprender mais sobre JavaScript e localStorage!

O que é localStorage e sessionStorage?

Primeiro é bom entender o que é a localStorage, e do seu irmão sessionStorage

A localStorage nos permite acessar um objeto chamado Storage, podemos armazenar dados neste, e que não expiram

Já a sessionStorage, que é um serviço semelhante, tem seus dados expirados depois de um tempo, mas funciona igual ao localStorage

Como salvar objetos na localStorage

Nós não podemos salvar objetos diretamente na localStorage, pois é um serviço que é limitado a pares de chave e valor

Então o que pode ser feito para evitar esta limitação?

Podemos transformar o objeto em uma string e quando resgatar ele transformar em objeto novamente

Veja um exemplo:

let pessoa = {nome: 'Matheus', idade: 29}

// Transformar o objeto em string e salvar em localStorage
localStorage.setItem('pessoa', JSON.stringify(pessoa));

// Receber a string
let pessoaString = localStorage.getItem('pessoa');

// transformar em objeto novamente
let pessoaObj = JSON.parse(pessoaString);

console.log(pessoaObj.nome); // Matheus

Com a instrução JSON.stringify conseguimos transformar o objeto em uma string, sem perder a sua formatação, utilizamos o método setItem para salvar na localStorage

Depois para resgatar este valor vamos precisar do método getItem

E por fim para converter em objeto novamente a string utilizamos o JSON.parse

Veja que na última linha estamos utilizando novamente de forma normal o objeto com a sua propriedade nome

Conclusão

Neste artigo vimos como salvar um objeto na localStorage

Primeiramente precisamos transformá-lo em string, pois a localStorage é um serviço que limite seus dados a pares de chave e valor

Quando resgatar o objeto em formato de string, podemos convertê-lo para objeto novamente com o método JSON.parse

E pronto, podemos utilizar o objeto normalmente!

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube