4.1 localStorage e sessionStorage
Armazenamento na Web permite que aplicativos da web guardem dados no navegador do usuário. Isso é útil para armazenar informações que precisam ser mantidas entre visitas ou durante a navegação entre páginas. Em HTML5, foram introduzidos dois tipos principais de armazenamento na web: localStorage e sessionStorage.
O que é localStorage?
localStorage é um tipo de armazenamento de dados que é guardado no navegador do usuário por um período indefinido. Os dados em localStorage permanecem acessíveis mesmo após fechar o navegador ou reiniciar o computador. Isso é útil para armazenar informações que devem ser mantidas entre sessões, como configurações do usuário ou dados do carrinho de compras.
O que é sessionStorage?
sessionStorage é um tipo de armazenamento de dados que é mantido no navegador do usuário durante uma única sessão. Os dados em sessionStorage estão acessíveis apenas enquanto a aba ou janela do navegador estiver aberta. Isso é útil para armazenar dados que são necessários apenas durante uma sessão, como dados temporários de formulários ou estados de aplicativos.
Métodos e propriedades principais
Métodos e propriedades de localStorage e sessionStorage
Ambos os tipos de armazenamentos na web têm a mesma API, que inclui métodos e propriedades para trabalhar com dados:
setItem(key, value): salva um valor com a chave especificada.getItem(key): retorna o valor salvo sob a chave especificada.removeItem(key): remove o valor com a chave especificada.clear(): limpa todos os dados no armazenamento.key(index): retorna a chave pelo índice.length: retorna o número de pares chave-valor no armazenamento.
4.2 Exemplos de uso
Exemplo de uso do localStorage:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de localStorage</title>
</head>
<body>
<h1>Exemplo de localStorage</h1>
<input type="text" id="username" placeholder="Digite seu nome de usuário">
<button id="saveButton">Salvar</button>
<button id="loadButton">Carregar</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Salvar valor no localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Nome de usuário salvo!');
});
// Carregar valor do localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Nome de usuário carregado!\n' + `${savedUsername}`);
} else {
alert('Nenhum nome de usuário encontrado.');
}
});
</script>
</body>
</html>
Exemplo de uso do sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de sessionStorage</title>
</head>
<body>
<h1>Exemplo de sessionStorage</h1>
<input type="text" id="sessionData" placeholder="Digite alguns dados">
<button id="saveSessionButton">Salvar</button>
<button id="loadSessionButton">Carregar</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Salvar valor no sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Dados salvos na sessão!');
});
// Carregar valor do sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Dados carregados da sessão!\n' + `${savedData}`);
} else {
alert('Nenhum dado encontrado na sessão.');
}
});
</script>
</body>
</html>
4.3 Comparação entre localStorage e sessionStorage
Diferenças entre localStorage e sessionStorage
- Tempo de armazenamento:
- localStorage salva dados por tempo indeterminado, até que o usuário ou script os remova explicitamente.
- sessionStorage salva dados apenas pelo tempo da sessão atual (aba ou janela do navegador).
- Escopo:
- Dados no localStorage estão acessíveis em todas as abas e janelas do mesmo domínio.
- Dados no sessionStorage estão acessíveis apenas na aba ou janela atual.
- Tamanho do armazenamento:
- Normalmente, localStorage e sessionStorage têm um limite de 5-10 MB por domínio, dependendo do navegador.
Exemplo de comparação entre localStorage e sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de Comparação</title>
</head>
<body>
<script>
// Uso do localStorage
localStorage.setItem('persistentData', 'Esses dados persistem entre sessões');
console.log(localStorage.getItem('persistentData')); // "Esses dados persistem entre sessões"
// Uso do sessionStorage
sessionStorage.setItem('temporaryData', 'Esses dados persistem apenas durante a sessão');
console.log(sessionStorage.getItem('temporaryData')); // "Esses dados persistem apenas durante a sessão"
</script>
</body>
</html>
4.4 Áreas de aplicação
Quando usar localStorage:
- Armazenar dados que precisam ser mantidos entre sessões, como configurações ou preferências do usuário
- Armazenar dados que devem estar acessíveis em todas as abas e janelas de um domínio
- Armazenar dados que raramente mudam
Quando usar sessionStorage:
- Armazenar dados temporários que são necessários apenas durante a sessão atual
- Armazenar dados que são específicos para a aba ou janela atual do navegador
- Armazenar dados que devem ser removidos ao fechar a aba ou janela
Segurança e privacidade
Ao usar armazenamentos na web, é importante considerar questões de segurança e privacidade:
- Criptografia: os dados nos armazenamentos na web não são criptografados por padrão. Se precisar armazenar informações confidenciais, é recomendado criptografar os dados antes de salvá-los.
- Ataques cross-domain: os armazenamentos na web operam dentro de um único domínio, prevenindo acesso a dados de outros domínios. No entanto, é importante se proteger de ataques como XSS (cross-site scripting) para que invasores não possam acessar dados no armazenamento.
- Limitação de volume de dados: tente armazenar apenas as informações necessárias e limpe regularmente dados obsoletos para evitar o estouro do armazenamento.
GO TO FULL VERSION