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

Como salvar um array de objetos na localStorage:

Na prática quase nunca temos só um objeto solto, né?

Boa notícia: a lógica é EXATAMENTE a mesma

let pessoas = [ {nome: ‘Matheus’, idade: 29}, {nome: ‘Ana’, idade: 31} ]

// salvar o array inteiro como string localStorage.setItem(‘pessoas’, JSON.stringify(pessoas));

// resgatar e voltar pra array de objetos let pessoasObj = JSON.parse(localStorage.getItem(‘pessoas’));

O JSON.stringify dá conta do array inteiro de uma vez

E o JSON.parse te devolve tudo já como array pronto pra usar

Se você tentar salvar o objeto direto, sem o JSON.stringify, se liga no que acontece:

let pessoa = {nome: ‘Matheus’, idade: 29} localStorage.setItem(‘pessoa’, pessoa);

Por isso o JSON.stringify não é opcional, é ele que preserva os dados do objeto

Já me ferrei com isso uma vez, então fica o aviso!

Como remover um objeto da localStorage:

Salvou e agora quer apagar? Tem dois caminhos

// remove só o item da chave que você passar localStorage.removeItem(‘pessoa’);

// limpa TUDO que está na localStorage localStorage.clear();

O removeItem tira só aquela chave específica

Já o clear zera a localStorage inteira, então cuidado ao usar

Perguntas rápidas sobre objetos na localStorage:

Dá pra salvar objeto sem o JSON.stringify? Sempre passe pelo JSON.stringify pra salvar e JSON.parse pra resgatar

Como saber se a chave já existe na localStorage? O getItem devolve null quando a chave não existe, então dá pra testar assim: if (localStorage.getItem(‘pessoa’)) { … }

localStorage ou sessionStorage pra guardar meu objeto? Use localStorage quando o dado precisa continuar salvo mesmo fechando o navegador, e sessionStorage quando ele pode sumir junto com a sessão. A forma de salvar o objeto (stringify/parse) é a mesma nos dois