Persistência de dados com localStorage

Olá, pessoal. Como o professor usou o localstorage na aula do dia 6/12, vou aproveitar para falar um pouco sobre.

O localStorage é uma implementação do HTML5 e com ele nos conseguimos criar listas e fazer com que os dados se tornarem persistentes, ou seja, elas ficam salvos no navegador do usuário e mesmo que você feche o navegador ou reinicie seu computador a sua lista vai continuar salva.

• Salvar dados

Uma das maneira de salvar um dado é usando o método setItem() que contém dois parâmetros: chave(nome da variável) e valor(conteúdo da variável)

<script>
LocalStorage.setItem("nome", "Daniel")
</script>

para visualizar a informação salva aperte F12(estou usando o chrome), clique em Application e procure por local storage. Lá estará o nome salvo.

• Recuperando/pegar dados

Para recuperar os dados usamos localStorage.getItem() chamando o parâmetro chave.
Eu irei colocar a informação salva dentro de uma variável e exibir no Console.

<script>
let nome = localStorage.getItem("nome")
 console.log(nome);
</script>

• Remover dados do LocalStorage

Para remover temos os métodos removeItem() que é utilizado para apagar o conteúdo de uma variável e clear() que remove todas as variáveis.

<script>
localStorage.removeItem("nome")
</script>

• Manipulando Lista no localStorage

<script>
    function adicionarNome() {
        // Recuperamos a lista atual do localStorage usando JSON.parse para transformar 
       uma string em objeto, caso a lista esteja vazia criamos somente um array vazio []
       
        var listaNomes = JSON.parse(localStorage.getItem("listaNomes")) || [];

        let nome = prompt("adicione um nome");

        // Adicionamos a variável nome à lista para salvar o nome de uma nova pessoa
        listaNomes.push(nome);

        // Atualiza a lista no localStorage usando  JSON.stringify para tranformar um objeto 
        em uma string json
        localStorage.setItem("listaNomes", JSON.stringify(listaNomes));
      }

      adicionarNome();
</script>