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:
localStorage.getItem('itens'): Aqui, você está obtendo os dados salvos anteriormente com a chave 'itens' do localStorage.
|| '[]': 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 '[]'.
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!