HTML - Armazenamento Web
Tipos de Armazenamento Web
Existem dois tipos de armazenamento web: Armazenamento Local e Armazenamento de Sessão. Ambos permitem armazenar pares de chave-valor no navegador, mas têm diferentes durações e escopos.
Armazenamento Local
O Armazenamento Local é um tipo de armazenamento web que permite guardar dados no navegador sem data de expiração. Os dados armazenados no Armazenamento Local permanecerão no navegador mesmo após o fechamento da janela. Isso o torna útil para armazenar dados que precisam ficar disponíveis por mais tempo.
Para armazenar dados no Armazenamento Local, você pode usar o objeto localStorage.
Exemplo: Armazenando um valor no Armazenamento Local
localStorage.setItem('username', 'JohnDoe');Estamos armazenando um par chave-valor onde a chave é 'username' e o valor é 'JohnDoe'. Para obter os dados armazenados, você pode usar o método getItem():
Exemplo: Obtendo um valor do Armazenamento Local
const username = localStorage.getItem('username');
console.log(username); // Saída: 'JohnDoe'Você também pode alterar o valor de um item armazenado usando setItem() novamente com a mesma chave e um novo valor:
Exemplo: Alterando um valor no Armazenamento Local
localStorage.setItem('username', 'JaneSmith');Armazenamento de Sessão
O Armazenamento de Sessão é outro tipo de armazenamento web que permite guardar dados para uma única sessão. Os dados armazenados no Armazenamento de Sessão permanecerão no navegador apenas até que a janela ou aba seja fechada. Quando a sessão termina, os dados são apagados.
Para armazenar dados no Armazenamento de Sessão, você pode usar o objeto sessionStorage, que tem os mesmos métodos que o localStorage.
Exemplo: Armazenando um valor no Armazenamento de Sessão
sessionStorage.setItem('theme', 'dark');Estamos armazenando um par chave-valor onde a chave é 'theme' e o valor é 'dark'. Para obter os dados armazenados, você pode usar o método getItem():
Exemplo: Obtendo um valor do Armazenamento de Sessão
const theme = sessionStorage.getItem('theme');
console.log(theme); // Saída: 'dark'Você pode alterar os dados armazenados no Armazenamento de Sessão da mesma forma que no Armazenamento Local, usando o método setItem() com a mesma chave e um novo valor:
Exemplo: Alterando um valor no Armazenamento de Sessão
sessionStorage.setItem('theme', 'light');Tanto o Armazenamento Local quanto o Armazenamento de Sessão têm seus próprios usos com base na duração e no escopo dos dados que você deseja armazenar. O Armazenamento Local é bom para guardar dados que precisam ficar disponíveis mesmo após o fechamento do navegador, enquanto o Armazenamento de Sessão é útil para armazenar dados específicos de uma única sessão ou página.
Trabalhando com Armazenamento Web
O Armazenamento Web oferece métodos para armazenar, obter e remover dados no navegador. Vamos ver como trabalhar com dados no Armazenamento Local e no Armazenamento de Sessão.
Armazenando Dados
Para armazenar dados no Armazenamento Web, você pode usar o método setItem(). Este método recebe dois argumentos: a chave (uma string) e o valor que você deseja armazenar.
Você pode armazenar diferentes tipos de dados no Armazenamento Web, como strings, números e objetos. Ao armazenar objetos, você precisa convertê-los para uma string usando JSON.stringify() antes de armazenar.
Exemplo: Armazenando uma string e um objeto no Armazenamento Local
// Armazenando uma string
localStorage.setItem('username', 'JohnDoe');
// Armazenando um objeto
const user = {
name: 'John Doe',
age: 25,
email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));Obtendo Dados
Para obter dados do Armazenamento Web, você pode usar o método getItem(). Este método recebe um argumento: a chave dos dados que você deseja obter.
Se os dados armazenados forem uma string, você pode usá-los diretamente. No entanto, se você armazenou um objeto, você precisa analisá-lo de volta para um objeto usando JSON.parse().
Exemplo: Obtendo dados do Armazenamento Local
// Obtendo uma string
const username = localStorage.getItem('username');
console.log(username); // Saída: 'JohnDoe'
// Obtendo um objeto
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // Saída: 'John Doe'
console.log(user.age); // Saída: 25
console.log(user.email); // Saída: 'john@example.com'Removendo Dados
Para remover dados do Armazenamento Web, você tem duas opções:
| Opção | Descrição |
|---|---|
removeItem() |
Remove um par chave-valor específico |
clear() |
Remove todos os dados armazenados no Armazenamento Web |
Exemplo: Removendo dados do Armazenamento Local
// Removendo um item específico
localStorage.removeItem('username');
// Removendo todos os dados
localStorage.clear();Os mesmos métodos (setItem(), getItem(), removeItem() e clear()) podem ser usados com o Armazenamento de Sessão, substituindo localStorage por sessionStorage.
Lembre-se que os dados armazenados no Armazenamento Web são específicos para o domínio. Cada domínio tem seu próprio espaço de armazenamento separado, e o JavaScript de um domínio não pode acessar dados armazenados por outro domínio.
Eventos de Armazenamento Web
O Armazenamento Web oferece eventos que permitem reagir a mudanças nos dados armazenados. Esses eventos são acionados quando os dados são armazenados, alterados ou removidos no Armazenamento Local ou no Armazenamento de Sessão.
O evento storage é disparado sempre que ocorre uma mudança no Armazenamento Web. Esse evento é acionado no objeto window de todas as páginas da mesma origem que têm acesso à área de armazenamento. O objeto de evento passado para o ouvinte do evento contém propriedades úteis, como:
| Propriedade | Descrição |
|---|---|
key |
A chave do item que foi alterado (adicionado, atualizado ou removido). |
oldValue |
O valor antigo do item antes da alteração (null se um novo item foi adicionado). |
newValue |
O novo valor do item após a alteração (null se um item foi removido). |
url |
A URL da página que fez a alteração. |
storageArea |
O objeto de armazenamento (localStorage ou sessionStorage) que foi afetado. |
Para lidar com eventos de armazenamento, você pode usar o método addEventListener() no objeto window.
Exemplo: Lidando com Eventos de Armazenamento
window.addEventListener('storage', function(event) {
console.log('Evento de armazenamento acionado');
console.log('Chave:', event.key);
console.log('Valor antigo:', event.oldValue);
console.log('Novo valor:', event.newValue);
console.log('URL:', event.url);
console.log('Área de armazenamento:', event.storageArea);
});É importante notar que o evento storage não é acionado na mesma página que fez a alteração. Ele é acionado apenas em outras páginas da mesma origem que têm acesso à área de armazenamento. Isso permite a comunicação entre diferentes páginas ou abas do seu aplicativo.
Exemplo: Sincronizando Dados Entre Páginas
// Página 1
localStorage.setItem('tema', 'escuro');
// Página 2
window.addEventListener('storage', function(event) {
if (event.key === 'tema') {
document.body.className = event.newValue;
}
});A Página 1 define o valor da chave 'tema' no Armazenamento Local. A Página 2 escuta eventos de armazenamento e verifica se a chave alterada é 'tema'. Se for, ela atualiza o nome da classe do elemento <body> para o novo valor, aplicando a mudança de tema.
Os eventos de armazenamento oferecem uma maneira de reagir a mudanças no Armazenamento Web e permitem a comunicação e sincronização entre diferentes páginas ou abas do seu aplicativo. Eles podem ser usados para vários fins, como sincronizar preferências do usuário, atualizar dados exibidos em tempo real ou acionar certas ações com base em mudanças nos dados armazenados.
Segurança do Armazenamento Web
Ao usar o Armazenamento Web (Armazenamento Local e Armazenamento de Sessão) para guardar dados no navegador, você deve considerar a segurança para proteger sua aplicação e os dados do usuário contra acesso não autorizado ou ataques.
Um dos principais riscos de segurança associados ao Armazenamento Web são os ataques de script entre sites (XSS). Ataques XSS ocorrem quando scripts maliciosos são injetados em sua aplicação e executados no contexto da sua página. Se você armazenar dados sensíveis no Armazenamento Web sem medidas de segurança adequadas, um atacante poderia acessar e roubar esses dados.
Para prevenir ataques XSS, você deve sempre validar e higienizar qualquer entrada do usuário antes de armazená-la no Armazenamento Web. Isso significa verificar a entrada em busca de caracteres ou scripts maliciosos e removê-los ou codificá-los. Você pode usar bibliotecas ou frameworks que fornecem funções integradas de validação e higienização de entrada para ajudar nesse processo.
Exemplo: Higienizar Entrada do Usuário
function sanitizeInput(input) {
// Remove quaisquer tags HTML e caracteres especiais
return input.replace(/<[^>]*>?/gm, '').replace(/[^\w\s]/gi, '');
}
const userInput = '<script>alert("Ataque XSS!");</script>';
const sanitizedInput = sanitizeInput(userInput);
localStorage.setItem('userInput', sanitizedInput);Outra consideração de segurança é criptografar dados sensíveis antes de armazená-los no Armazenamento Web. Embora os dados do Armazenamento Web não sejam diretamente acessíveis por outros sites, eles ainda podem ser lidos por qualquer pessoa que tenha acesso ao dispositivo ou navegador do usuário. Criptografar os dados adiciona uma camada extra de proteção.
Para criptografar dados, você pode usar algoritmos de criptografia como AES (Advanced Encryption Standard) ou bibliotecas que fornecem funções de criptografia. Antes de armazenar dados sensíveis, criptografe-os com uma chave de criptografia segura. Ao recuperar os dados, descriptografe-os usando a mesma chave.
Exemplo: Criptografar e Descriptografar Dados
function encryptData(data, key) {
// Implementar lógica de criptografia usando uma biblioteca ou algoritmo
// Exemplo usando uma cifra de substituição simples
const encryptedData = data.split('').map(char => String.fromCharCode(char.charCodeAt(0) + key)).join('');
return encryptedData;
}
function decryptData(encryptedData, key) {
// Implementar lógica de descriptografia usando uma biblioteca ou algoritmo
// Exemplo usando uma cifra de substituição simples
const decryptedData = encryptedData.split('').map(char => String.fromCharCode(char.charCodeAt(0) - key)).join('');
return decryptedData;
}
const sensitiveData = 'Dados Secretos';
const encryptionKey = 3;
const encryptedData = encryptData(sensitiveData, encryptionKey);
localStorage.setItem('sensitiveData', encryptedData);
// Recuperando e descriptografando os dados
const storedEncryptedData = localStorage.getItem('sensitiveData');
const decryptedData = decryptData(storedEncryptedData, encryptionKey);
console.log(decryptedData); // Saída: 'Dados Secretos'É importante escolher uma chave de criptografia segura e mantê-la protegida. Evite armazenar a chave de criptografia no mesmo local que os dados criptografados, pois isso anularia o propósito da criptografia.
Além disso, tenha cuidado com os dados que você armazena no Armazenamento Web. Evite armazenar informações altamente sensíveis como senhas, números de cartão de crédito ou números de identificação pessoal (PINs) no Armazenamento Web, mesmo que criptografados. Geralmente, é mais seguro armazenar dados sensíveis no lado do servidor e usar protocolos de comunicação seguros como HTTPS para transmitir os dados.
Exemplos Práticos e Casos de Uso
O Armazenamento Web (Armazenamento Local e Armazenamento de Sessão) tem muitos usos no desenvolvimento web. Aqui estão alguns exemplos comuns e casos de uso onde o Armazenamento Web pode melhorar a experiência do usuário e a funcionalidade do aplicativo.
Armazenando Preferências e Configurações do Usuário
O Armazenamento Web é uma maneira de armazenar preferências e configurações do usuário. Você pode usar o Armazenamento Local para salvar coisas como o idioma preferido do usuário, tema ou escolhas de layout. Isso permite manter as preferências do usuário mesmo após eles saírem do site e voltarem mais tarde.
Exemplo: Armazenando Preferências e Configurações do Usuário
// Define a preferência de tema do usuário
function setTheme(theme) {
localStorage.setItem('theme', theme);
applyTheme(theme);
}
// Aplica o tema selecionado
function applyTheme(theme) {
document.body.className = theme;
}
// Obtém a preferência de tema do usuário ao carregar a página
window.addEventListener('load', function() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
applyTheme(storedTheme);
}
});A função setTheme() armazena o tema selecionado pelo usuário no Armazenamento Local. A função applyTheme() aplica o tema à página definindo o nome da classe do elemento <body>. Ao carregar a página, verificamos se há uma preferência de tema armazenada e a aplicamos, se encontrada.
Armazenando Dados em Cache para Acesso Offline
O Armazenamento Web pode armazenar dados em cache para acesso offline. Se seu aplicativo web precisa funcionar offline ou em situações de baixa conectividade, você pode armazenar dados no Armazenamento Local. Isso permite que o aplicativo funcione mesmo quando o usuário não está conectado à internet.
Exemplo: Armazenando Dados em Cache para Acesso Offline
// Armazena os dados em cache no Armazenamento Local
function cacheData(data) {
localStorage.setItem('cachedData', JSON.stringify(data));
}
// Recupera os dados em cache do Armazenamento Local
function getCachedData() {
const cachedData = localStorage.getItem('cachedData');
return cachedData ? JSON.parse(cachedData) : null;
}
// Busca dados do servidor
function fetchDataFromServer() {
// Faz uma requisição à API para buscar dados
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Armazena os dados buscados em cache
cacheData(data);
// Usa os dados no aplicativo
displayData(data);
})
.catch(error => {
console.log('Erro ao buscar dados:', error);
// Recupera dados em cache como alternativa
const cachedData = getCachedData();
if (cachedData) {
displayData(cachedData);
} else {
console.log('Nenhum dado em cache disponível.');
}
});
}A função cacheData() armazena os dados buscados no Armazenamento Local. A função getCachedData() recupera os dados em cache do Armazenamento Local. Se o aplicativo falhar ao buscar dados do servidor (por exemplo, devido a um erro de rede), ele recorre aos dados em cache, se disponíveis.
Implementando Funcionalidade de Carrinho de Compras
O Armazenamento Web pode implementar funcionalidade de carrinho de compras em aplicativos de comércio eletrônico. Você pode usar o Armazenamento de Sessão para armazenar os produtos e quantidades selecionados pelo usuário enquanto eles navegam pelo site. Isso permite que o carrinho de compras permaneça intacto mesmo se o usuário navegar para longe da página ou fechar a aba do navegador.
Exemplo: Implementando Funcionalidade de Carrinho de Compras
// Adiciona um produto ao carrinho de compras
function addToCart(product) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart.push(product);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Remove um produto do carrinho de compras
function removeFromCart(productId) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart = cart.filter(product => product.id !== productId);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Obtém o conteúdo atual do carrinho de compras
function getCartContents() {
return JSON.parse(sessionStorage.getItem('cart')) || [];
}A função addToCart() adiciona um produto ao carrinho de compras armazenado no Armazenamento de Sessão. A função removeFromCart() remove um produto do carrinho com base em seu ID. A função getCartContents() recupera o conteúdo atual do carrinho de compras.
Salvando Dados de Formulário Temporariamente
O Armazenamento Web pode salvar dados de formulário temporariamente. Se um usuário está preenchendo um formulário longo e acidentalmente fecha o navegador ou navega para longe da página, você pode usar o Armazenamento de Sessão para salvar o progresso deles. Quando eles retornarem ao formulário, você pode restaurar os dados salvos, permitindo que eles continuem de onde pararam.
Exemplo: Salvando Dados de Formulário Temporariamente
// Salva dados do formulário no Armazenamento de Sessão
function saveFormData() {
const form = document.querySelector('form');
const formData = new FormData(form);
sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(formData)));
}
// Carrega dados do formulário do Armazenamento de Sessão
function loadFormData() {
const savedData = sessionStorage.getItem('formData');
if (savedData) {
const formData = JSON.parse(savedData);
const form = document.querySelector('form');
Object.keys(formData).forEach(key => {
const field = form.elements[key];
if (field) {
field.value = formData[key];
}
});
}
}
// Salva dados do formulário na mudança de entrada
document.querySelector('form').addEventListener('input', saveFormData);
// Carrega dados do formulário ao carregar a página
window.addEventListener('load', loadFormData);A função saveFormData() salva os dados do formulário no Armazenamento de Sessão sempre que um campo de entrada muda. A função loadFormData() carrega os dados do formulário salvos do Armazenamento de Sessão quando a página é carregada, preenchendo os campos do formulário com os valores inseridos anteriormente.
Estes são alguns exemplos de como o Armazenamento Web pode ser usado em cenários práticos. O Armazenamento Web fornece uma maneira simples de armazenar dados no lado do cliente, permitindo várias funcionalidades e melhorias em aplicativos web. Ele oferece uma solução para melhorar a experiência do usuário e a funcionalidade de seus aplicativos web.