HTML de armazenamento local, melhor do que cookies .
O que é HTML armazenamento local?
Com o armazenamento local, aplicações web pode armazenar dados localmente no navegador do usuário.
Antes HTML5, os dados do aplicativo teve que ser armazenados em cookies , incluído em cada pedido do servidor. armazenamento local é mais seguro, e grandes quantidades de dados podem ser armazenados localmente, sem afetar o desempenho do site.
Ao contrário de cookies , o limite de armazenamento é muito maior (at least 5MB) e informação nunca é transferido para o servidor.
O armazenamento local é por origem (per domain and protocol) . Todas as páginas, de uma origem, pode armazenar e acessar os mesmos dados.
armazenamento local e sessão
armazenamento Web oferece duas áreas-local de armazenamento diferentes de armazenamento e sessão de armazenamento-que diferem em escopo e duração.
Os dados colocados em armazenamento local é por origem (a combinação de protocolo, nome de host, e o número da porta, tal como definido na política de mesma origem) (os dados estão disponíveis para todos os scripts carregados a partir de páginas a partir da mesma origem que anteriormente armazenados os dados) e persiste depois que o navegador é fechado.
armazenamento de sessão é per-origem-per-janela-ou-guia e é limitada para o tempo de vida da janela. armazenamento de sessão se destina a permitir instâncias separadas da mesma aplicação web para executar em diferentes janelas sem interferir uns com os outros, um caso de uso que não está bem apoiado por cookies.
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente Armazenamento local.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8 | 3,5 | 4.0 | 11,5 |
HTML armazenamento local Objetos
armazenamento local HTML fornece dois objetos para armazenar dados no cliente:
- window.localStorage - lojas de dados com nenhuma data de expiração
- window.sessionStorage - armazena dados para uma sessão (os dados são perdidos quando a aba do navegador é fechado)
Antes de usar o armazenamento local, verificar o suporte ao 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 validade. Os dados não serão eliminados quando o navegador é fechado, e estará disponível no dia seguinte, semana ou ano.
Exemplo
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Tente você mesmo " Exemplo explicado:
- Criar um localStorage par nome / valor com name="lastname" e value="Smith"
- Recuperar o valor de "lastname" e inseri-lo no elemento com id = "resultado"
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 "lastname" item de localStorage é 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 for necessário!
O exemplo a seguir conta o número de vezes que um usuário clicou um botão. Neste código a cadeia de valor é convertido em um número para ser capaz de 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)."; Tente você mesmo " O sessionStorage Objeto
O sessionStorage objeto é igual à localStorage objeto, exceto que ele armazena os dados para apenas uma sessão. Os dados são apagados quando o usuário fecha a aba específica do navegador.
O exemplo a seguir conta o número de vezes que um usuário clicou 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."; Tente você mesmo "