API de armazenamento da Web HTML
armazenamento web HTML; melhor que biscoitos.
O que é Armazenamento Web HTML?
Com o armazenamento na Web, os aplicativos da Web podem armazenar dados localmente no navegador do usuário.
Antes do HTML5, os dados do aplicativo precisavam ser armazenados em cookies, incluídos em todas as solicitações do servidor. O armazenamento na Web é mais seguro e grandes quantidades de dados podem ser armazenadas localmente, sem afetar o desempenho do site.
Ao contrário dos cookies, o limite de armazenamento é muito maior (pelo menos 5 MB) e as informações nunca são transferidas para o servidor.
O armazenamento da Web é por origem (por domínio e protocolo). Todas as páginas, de uma origem, podem armazenar e acessar os mesmos dados.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao Web Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Objetos de armazenamento da Web HTML
O armazenamento web HTML fornece dois objetos para armazenar dados no cliente:
window.localStorage- armazena dados sem data de validadewindow.sessionStorage- armazena dados para uma sessão (os dados são perdidos quando a guia do navegador é fechada)
Antes de usar o armazenamento na web, verifique o suporte do navegador para localStorage e sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
O objeto localStorage
O objeto localStorage armazena os dados sem data de expiração. Os dados não serão excluídos quando o navegador for fechado e estarão disponíveis no próximo dia, semana ou ano.
Exemplo
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Exemplo explicado:
- Crie um par de nome/valor localStorage com name="lastname" e value="Smith"
- Recupere o valor de "lastname" e insira-o no elemento com id="result"
O exemplo acima também pode ser escrito assim:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
A sintaxe para remover o item localStorage "sobrenome" é a seguinte:
localStorage.removeItem("lastname");
Nota: Os pares nome/valor são sempre armazenados como strings. Lembre-se de convertê-los para outro formato quando necessário!
O exemplo a seguir conta o número de vezes que um usuário clicou em um botão. Neste código a string de valor é convertida em um número para poder aumentar o contador:
Exemplo
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
O objeto sessionStorage
O sessionStorageobjeto é igual ao objeto localStorage, exceto
que armazena os dados de apenas uma sessão. Os dados são excluídos quando o usuário fecha a guia específica do navegador.
O exemplo a seguir conta o número de vezes que um usuário clicou em um botão na sessão atual:
Exemplo
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";