Como salvar arrays na localStorage de JavaScript

Neste artigo você vai aprender a como salvar arrays na localStorage, ou seja, guardar um dado do tipo array na storage

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

Basicamente precisamos entender que a localStorage só consegue ter strings salvas nela

Ou seja, precisamos converter nosso array para uma string também!

E isso é muito simples, o objeto JSON tem um método para isso o stringify

Quando obtvermos a string, podemos inserir o dado array em string na localStorage com o método setItem, do próprio objeto localStorage

Veja o exemplo a seguir:

const arr = [1,2,3];

// salvar dados
localStorage.setItem('itens', JSON.stringify(arr));

Pronto! Nosso array está lá na localStorage e se chama itens

Agora como podemos resgatar e utilizar posteriormente?

Basta resgatar com getItem de localStorage e converter novamente, com o método JSON.parse

Veja:

// resgatar os dados
const itens = JSON.parse(localStorage.getItem('itens'))

console.log(itens); // [1, 2, 3]

E assim o array que virou texto, é um array novamente e já podemos utilizá-lo!

Conclusão

Neste artigo você aprendeu a como salvar arrays na localStorage de JavaScript

Utilizamos o método stringify de JSON para transformar o array em texto, aí sim ele pode entrar na localStorage

Para resgatar o array temos que utilizar getItem e depois transformar o texto em array novamente, podemos fazer isso com parse de JSON

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Explicar o caso em que a chave ainda não existe: o getItem devolve null, e passar null pro JSON.parse pode te dar dor de cabeça na hora de usar o array (dá erro quando você tenta um push ou um map num valor que não é array). Mostrar o padrão de proteger com um valor inicial, tipo resgatar os dados e, se vier null, começar com um array vazio. Antecipar o erro do leitor no estilo ‘Tome cuidado!’: se você tentar percorrer esse dado sem checar, o console vai reclamar.

Mostrar que a mesma lógica de stringify e parse funciona pra array de objetos, não só de números. Um exemplo rápido com uma lista de objetos (cada um com uma ou duas propriedades), salvando com JSON.stringify e resgatando com JSON.parse, e reforçar que o objeto volta inteiro, pronto pra usar. Ligar ao que já foi ensinado: é o mesmo caminho, só muda o conteúdo do array.

Ensinar o fluxo completo de atualização: resgatar o array da localStorage, dar um push no novo item e salvar de novo com setItem e stringify. Explicar o porquê antes do como: a localStorage não tem um ‘append’, então o padrão é sempre ler, alterar em memória e gravar o array inteiro de volta.

Responder dúvidas frequentes e curtas: ‘Por que não dá pra salvar o array direto?’ (a localStorage só guarda string, por isso o stringify), ‘Como apagar o array salvo?’ (removeItem com o nome da chave), e ‘O dado some quando fecho o navegador?’ (localStorage persiste, diferente de sessionStorage). Cada resposta em uma ou duas linhas.