1
resposta

Dúvida sobre o CONSTRUCTOR()

Bom dia!!

Eu consegui compreender a utilização do localStorage, entretanto eu gostaria de saber por que o envio dos dados ao localStorage (this.listaDeCompra = JSON.parse(localStorage.getItem('itens') || '[]')) foi desenvolvido dentro do constructor?

1 resposta

Olá Wellington!

A utilização do localStorage dentro do constructor é uma prática comum em aplicações web para carregar os dados salvos anteriormente no localStorage assim que a classe ou componente é inicializado.

Quando você armazena dados no localStorage, esses dados ficam disponíveis mesmo após o usuário fechar o navegador e abrir novamente. Isso permite que você persista informações importantes entre sessões do usuário.

Ao desenvolver a linha this.listaDeCompra = JSON.parse(localStorage.getItem('itens') || '[]') dentro do constructor, você está definindo o comportamento inicial do componente ou classe. Vamos explicar a linha passo a passo:

  1. localStorage.getItem('itens'): Aqui, você está obtendo os dados salvos anteriormente com a chave 'itens' do localStorage.

  2. || '[]': O operador || é um operador de coalescência nula (nullish coalescing operator), que retorna o valor à esquerda se esse valor não for nulo ou indefinido. Caso o valor seja nulo ou indefinido, ele retorna o valor à direita do operador. Neste caso, se não houver dados salvos no localStorage com a chave 'itens', ele retornará um array vazio '[]'.

  3. JSON.parse(...): Como o localStorage armazena os dados como strings, é necessário utilizar JSON.parse() para converter a string de volta para um objeto JavaScript (ou neste caso, um array) e poder trabalhar com os dados novamente.

Dessa forma, ao inicializar a classe ou componente, você está recuperando os dados previamente salvos no localStorage e atribuindo-os à propriedade this.listaDeCompra, que será usada durante a execução do componente ou classe.

Essa prática é comum para que a aplicação possa manter o estado dos dados mesmo após a atualização ou recarregamento da página, garantindo uma experiência mais consistente e persistente para o usuário.

Espero que esta explicação tenha sido útil! Se você tiver mais dúvidas ou precisar de mais esclarecimentos, sinta-se à vontade para perguntar. Bom trabalho!