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

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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