JavaScript

Como salvar um objeto na localStorage

21 de julho de 2020

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

como salvar objeto na localstorage capa

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

Subscribe
Notify of
guest
6 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
João Nascimento

Fantástico! Simples e muito útil!
Obrigado e parabéns!

Battisti

obrigado tb João =)

Pedro Emídio

Muito bom o conteúdo, ajudou muito!

Battisti

de nada Pedro!

anderson

salvou minha vida, mt obrigado

Battisti

de nada Anderson!

6
0
Would love your thoughts, please comment.x