Javascript: praticando o uso do local storage

Armazenando dados no navegador - Apresentação

Introdução ao Curso de Javascript e Local Storage

Olá! Boas-vindas a este curso de Javascript, onde vamos praticar intensamente o Local Storage. Este é um recurso muito importante dos navegadores, que nos permite armazenar informações das nossas aplicações e preferências do usuário no navegador.

Meu nome é Neilton, sou instrutor na Escola de FrontEnd.

Audiodescrição: Neilton é um homem de pele preta, com olhos e cabelos escuros. No momento, ele está utilizando óculos com armação retangular e veste uma camisa amarela.

Objetivos e Pré-requisitos do Curso

Novamente, boas-vindas. O que vamos aprender neste curso? Vamos praticar bastante o Local Storage. Como pré-requisito, é importante que já tenhamos um conhecimento básico sobre o funcionamento do Local Storage nos navegadores e como manipulamos e salvamos informações nele.

O objetivo aqui é revisar um pouco esses conceitos e, em seguida, propor algumas atividades práticas para que possamos colocar a mão no código e resolver os exercícios, consolidando assim nossos conhecimentos.

Aplicação Prática: TechBoard e Sincronização de Temas

Olá! Nesta aula, vamos explorar uma aplicação chamada TechBoard, que possui temas claro e escuro. Ao alternarmos para o tema escuro, todo o visual da aplicação muda, proporcionando uma aparência agradável. Essa configuração é armazenada no armazenamento local do navegador, permitindo que, mesmo ao recarregar a página, o tema escuro permaneça ativo, sem retornar ao tema claro.

Além disso, aprenderemos a compartilhar essa informação entre diferentes abas. Abas que utilizam o mesmo armazenamento local estarão sincronizadas. Assim, ao alterarmos o tema em uma segunda aba, a primeira aba também deve refletir essa mudança, como demonstrado.

Formato do Curso e Conclusão

Vamos entender como funciona esse recurso essencial do navegador. Este curso adota um novo formato, focado na prática dos conhecimentos adquiridos ao longo das formações. Estamos animados para compartilhar esse conhecimento com vocês. Vamos ao vídeo!

Armazenando dados no navegador - Armazenamento e sincronização entre abas e janelas

Introdução à Aplicação e Problema Inicial

Estamos trabalhando em uma aplicação, uma landing page do Tech Board, que possui modos claro e escuro. Ao clicar no botão com uma lua roxa, alternamos para o modo escuro. No entanto, queremos que a página permaneça no modo escuro mesmo após recarregá-la. Atualmente, ao recarregar, ela retorna ao modo claro. Para resolver isso, utilizamos o local storage do navegador.

Estrutura do Código e Alternância de Temas

No código, temos um arquivo chamado script.js, que estamos visualizando no Visual Studio Code. A aplicação é composta por HTML, CSS e o script.js. No HTML, há elementos como um botão e ícones SVG de sol e lua, que permitem alternar entre os modos claro e escuro. O botão na linha 12 possui o ID theme-toggle, usado para alternar os temas.

No CSS, utilizamos variáveis para definir cores base e uma classe chamada darkmode. Quando alternamos para o tema escuro, adicionamos essa classe ao body da aplicação, alterando as cores.

Implementação do Modo Escuro com Local Storage

O foco está no arquivo script.js. Nele, pegamos o botão theme-toggle com a constante themeSwitch. Vamos começar definindo essa constante e as funções para habilitar e desabilitar o modo escuro:

const themeSwitch = document.getElementById("theme-toggle");

const enableDarkmode = () => {
    document.body.classList.add("darkmode");
};

const disableDarkmode = () => {
    document.body.classList.remove("darkmode");
};

Verificação e Persistência do Estado do Tema

Agora, precisamos verificar o estado do modo escuro ao carregar a página. Para isso, utilizamos o local storage para armazenar o estado do tema. Inicialmente, verificamos se o modo escuro está ativo:

let darkmode = localStorage.getItem("darkmode");

if (darkmode === "active") enableDarkmode();

Em seguida, escutamos o evento de clique no botão para alternar entre os temas, chamando as funções enableDarkmode e disableDarkmode:

themeSwitch.addEventListener("click", () => {
    darkmode = localStorage.getItem("darkmode");
    darkmode !== "active" ? enableDarkmode() : disableDarkmode();
});

Atualização do Local Storage nas Funções de Tema

Para garantir que o estado do tema seja salvo no local storage, modificamos as funções enableDarkmode e disableDarkmode para atualizar o local storage:

const enableDarkmode = () => {
    document.body.classList.add("darkmode");
    localStorage.setItem("darkmode", "active");
};

const disableDarkmode = () => {
    document.body.classList.remove("darkmode");
    localStorage.setItem("darkmode", null);
};

Sincronização de Abas com a API de Storage

Para verificar, pressionamos F12 ou clicamos com o botão direito e selecionamos "Inspecionar". Na aba de aplicativo, encontramos o local storage com a chave darkmode e o valor "ativo". Ao alternar para o modo claro, o valor retorna a nulo.

Se duplicarmos a página, ao alterar o modo em uma aba, a outra não reflete a mudança, pois compartilham o mesmo local storage. Para sincronizar abas, utilizamos a API de storage do navegador, escutando o evento storage. No Visual Studio Code, abaixo de themeSwitch.addEventListener, adicionamos window.addEventListener para escutar o evento storage e sincronizar as abas:

window.addEventListener("storage", (event) => {
    if (event.key === "darkmode") {
        const darkmode = localStorage.getItem("darkmode");

        if (darkmode === "active") {
            enableDarkmode();
        } else {
            disableDarkmode();
        }
    }
});

Considerações sobre o Uso do Local Storage

Esse evento de storage será ouvido entre duas abas diferentes, sincronizando os eventos. Quando alterarmos o tema em uma aba, ele será alterado na outra também. Ao recarregar a página, se o darkmode estiver ativo, a segunda aba também estará com o darkmode ativo. Isso ocorre porque estamos sincronizando as informações entre o armazenamento local das abas que compartilham esse armazenamento. Se mudarmos para o modo claro em uma aba, a outra também deve mudar para o modo claro.

Essa é uma forma de sincronizar informações entre abas ou janelas que compartilham o mesmo localStorage. Um detalhe importante sobre o localStorage é que ele armazena apenas strings. Estamos trabalhando bem com ele, pois active é uma string. No entanto, se quisermos salvar um objeto ou matriz, teremos um problema, pois ele não consegue armazená-los diretamente. Para isso, utilizamos duas funções para converter esses dados em uma string e armazená-los no localStorage.

Armazenamento de Objetos no Local Storage

Vamos ver na prática esses exemplos. No código, criaremos uma constante user, que será um objeto com as propriedades name e age. Tentaremos armazenar esse objeto no localStorage com localStorage.setItem, mas o valor será salvo como [object Object], pois precisamos converter o objeto para uma string. Para isso, utilizamos JSON.stringify para converter o objeto user em uma string:

const user = { name: "Neilton", age: 29 };
localStorage.setItem("user", JSON.stringify(user));

Após salvar o arquivo e recarregar o navegador, o dado será salvo corretamente com a chave user e o valor contendo o objeto. Para recuperar esse valor como um objeto, utilizamos JSON.parse. Criamos uma nova constante storedUser, acessamos o localStorage.getItem e envolvemos essa linha de código com JSON.parse para transformar a string de volta em um objeto. Com console.log, podemos verificar que o dado foi recuperado como um objeto:

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser);

Métodos Adicionais do Local Storage

Existem outros métodos interessantes, como removeItem para deletar itens do localStorage, ou clear para apagar tudo. No código, podemos utilizar localStorage.removeItem passando a chave que queremos excluir, por exemplo, user. Após salvar e recarregar o navegador, o usuário será removido do localStorage:

localStorage.removeItem("user");

Para apagar tudo, utilizamos localStorage.clear, que remove todos os itens do localStorage:

localStorage.clear();

Considerações Finais e Exercícios Práticos

É importante lembrar que o localStorage tem uma capacidade limitada, geralmente entre 5 e 6 megabytes, variando de navegador para navegador. Devemos ter cuidado para não exceder esse limite.

Com todas essas informações, acreditamos que vocês possam resolver os exercícios práticos que serão disponibilizados. É importante realizar esses exercícios para consolidar o conhecimento, aplicando o uso do localStorage em situações reais do dia a dia de pessoas desenvolvedoras. Caso tenham dúvidas, podem deixar uma mensagem no fórum ou nos contatar no Discord. Nos vemos por aí!

Sobre o curso Javascript: praticando o uso do local storage

O curso Javascript: praticando o uso do local storage possui 18 minutos de vídeos, em um total de 15 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Armazenando dados no navegador