A API Web Storage fornece um mecanismo para os navegadores armazenarem pares chave-valor diretamente no navegador, permitindo que os desenvolvedores armazenem informações que podem ser usadas em diferentes recarregamentos de página e sessões. Os dois principais componentes da Web Storage API são localStorage e sessionStorage. localStorage é a parte da Web Storage API que permite que os dados persistam mesmo depois que a janela do navegador é fechada ou a página é atualizada. Esses dados permanecem disponíveis até que sejam explicitamente removidos pela aplicação ou pelo usuário. sessionStorage é outra parte da Web Storage API que armazena dados durante a sessão da página, ou seja, os dados ficam disponíveis enquanto a aba ou janela do navegador estiver aberta. No entanto, ao contrário do localStorage, os dados no sessionStorage são apagados quando a aba ou janela é fechada. You will learn more about sessionStorage in the next lesson. Casos comuns de uso para localStorage incluem armazenar configurações do usuário, como temas ou preferências de idioma, lembrar dados de formulários entre sessões do navegador e armazenar em cache pequenos pedaços de informação para melhorar o desempenho de aplicativos web. Cachear refere-se a armazenar dados acessados com frequência em um local de armazenamento temporário, conhecido como cache, para que solicitações subsequentes desses dados possam ser atendidas mais rapidamente sem a necessidade de recomputar ou buscá-los de uma fonte de dados mais lenta, como um banco de dados ou servidor externo. Alguns métodos comuns de localStorage incluem os métodos setItem, getItem, removeItem e clear. Aqui está um exemplo de uso do método setItem() que armazena um par chave-valor em localStorage.

localStorage.setItem('username', 'JaneDoe');

Então, se quisermos recuperar esse valor de uma chave específica do localStorage, podemos usar o método getItem().

let username = localStorage.getItem('username');
console.log(username); // JaneDoe

Para remover um item do localStorage usando sua chave, você pode usar o método removeItem().

localStorage.removeItem('username');

Para limpar todos os dados em localStorage, você pode usar o método clear().

localStorage.clear();

Agora, vamos dar uma olhada em um exemplo onde usamos localStorage para armazenar o tema preferido de um usuário.

// Store the user's theme preference
localStorage.setItem('theme', 'dark');

// Retrieve the stored theme preference
const userTheme = localStorage.getItem('theme');
console.log(userTheme); // 'dark'

// Remove the theme preference
localStorage.removeItem('theme');

// Clear all localStorage data
localStorage.clear();

Neste exemplo:

• Primeiro armazenamos uma escolha de tema (dark) para o usuário.
• Em seguida, recuperamos esse tema e o exibimos no console.
• Finalmente, demonstramos como remover um item específico ou limpar todos os dados armazenados.

localStorage é muito útil para armazenar pequenos pedaços de dados que precisam persistir entre sessões, mas é importante notar que localStorage não deve ser usado para armazenar informações sensíveis, como senhas, porque pode representar riscos de segurança.