O armazenamento de dados sobre o cliente pode resolver muitos problemas e reduzir a transmissão desnecessária de dados:
1. Pode salvar o status do programa: o usuário pode saber onde ele trabalha depois de fechar o navegador e abri -lo.
2. Os dados do cache: não há necessidade de obter muitos dados que não mudarão do servidor todas as vezes.
3. Pode salvar as preferências do usuário: esse tipo de dados geralmente não precisa estar presente no servidor.
Práticas anterioresAntes do armazenamento local HTML5, se quisermos salvar dados persistentes no cliente, existem várias opções:
1. Cookies HTTP. A desvantagem dos cookies HTTP é óbvia. Eles só podem armazenar até 4kb de dados, e cada solicitação HTTP será enviada de volta ao servidor e transmitiu texto sem formatação (a menos que você use o SSL).
2. IE UserData. O UserData é uma solução de armazenamento local lançada pela Microsoft durante a guerra do navegador nos anos 90. Ele usa o atributo de comportamento do DHTML para armazenar dados locais, permitindo que cada página armazene até 64 mil dados e até 640k dados por site. As desvantagens dos dados do usuário são óbvios. Não faz parte do padrão da web. A menos que seu programa precise apenas apoiar o IE, é basicamente inútil.
3. Cookies flash. Na verdade, os cookies flash não são os mesmos que os biscoitos HTTP. Talvez seu nome deva ser o armazenamento local do Flash. Os cookies flash permitem que cada site armazene dados não mais que 100k por padrão. Se exceder, o Flash solicitará automaticamente um espaço de armazenamento maior do usuário. Com a interface externa -interface do Flash, você pode operar facilmente o armazenamento local do Flash através do JavaScript. O problema com o flash é muito simples, porque é flash.
4. Google Gears. O Gears é um plug-in de navegador de código aberto lançado pelo Google em 2007, com o objetivo de melhorar a compatibilidade dos principais navegadores. A Gears possui um banco de dados SQL incorporado com base no SQLite e fornece uma API unificada para acessar o banco de dados. Após obter a autorização do usuário, cada site pode armazenar dados ilimitados no banco de dados SQL. O problema de Gears é que o próprio Google não o usa mais.
A deslumbrante variedade de tecnologias leva a problemas de compatibilidade do navegador. Os cookies mais comuns aqui podem ser cookies.
Uma nova experiência em html5Em resposta aos problemas acima, o HTML5 fornece uma solução mais ideal: se você precisar armazenar dados que podem ser resolvidos simplesmente usando pares de chave/valor, poderá usar o armazenamento da Web.
Comparado com os cookies, o armazenamento da Web tem muitas vantagens, resumidas da seguinte forma:
1. Espaço de armazenamento maior: cada espaço de armazenamento independente sob o IE8 é de 10m e outros navegadores têm implementações ligeiramente diferentes, mas são muito maiores que os cookies.
2. O conteúdo armazenado não será enviado ao servidor: quando um cookie estiver definido, o conteúdo do cookie será enviado junto com a solicitação no servidor, que é um desperdício de largura de banda para dados armazenados localmente. Os dados no armazenamento da Web existem apenas localmente e não interagem com o servidor.
3. Interfaces mais ricas e fáceis de usar: o armazenamento da Web fornece um conjunto mais rico de interfaces, facilitando a operação de dados.
4. Espaço de armazenamento independente: cada domínio (incluindo subdomínio) possui espaço de armazenamento independente, e cada espaço de armazenamento é completamente independente, portanto, não causará confusão de dados.
Classificação de armazenamento da WebA Web Storage realmente consiste em duas partes: SessionStorage e LocalStorage.
O SessionStorage é usado para armazenar dados em uma sessão localmente, que só pode ser acessada nas páginas na mesma sessão e os dados serão destruídos após o término da sessão. Portanto, o SessionStorage não é um armazenamento local persistente, mas apenas um armazenamento no nível da sessão.
O LocalStorage é usado para armazenamento local persistente e os dados nunca expiram, a menos que sejam excluídos ativamente.
Verifique se o armazenamento da web é suportadoO armazenamento da Web é suportado nos principais navegadores principais, mas, para ser compatível com navegadores antigos, ainda precisamos verificar se essa tecnologia pode ser usada.
O primeiro método: verifique se o navegador suporta o armazenamento da web verificando se o objeto de armazenamento existe:
if (typeof (armazenamento)! == "indefinido") {
// Sim! LocalStorage e SessionStorage Support!
// Algum código ...
} outro {
// Desculpe! Sem suporte de armazenamento na web ..
}
A segunda maneira é verificar os respectivos objetos separadamente, como verificar se o LocalStorage suporta:
if (typeof (localStorage) == 'indefinido') {
Alert ('Seu navegador não suporta HTML5 LocalStorage. Tente atualizar.');
} outro {
// Sim! LocalStorage e SessionStorage Support!
// Algum código ...
}
ou:
if ('LocalStorage' na janela && Window ['LocalStorage']! == null) {
// Sim! LocalStorage e SessionStorage Support!
// Algum código ...
} outro {
Alert ('Seu navegador não suporta HTML5 LocalStorage. Tente atualizar.');
}
ou
if (!! localStorage) {
// Sim! LocalStorage e SessionStorage Support!
// Algum código ...
} outro {
Alert ('Seu navegador não suporta HTML5 LocalStorage. Tente atualizar.');
}
Obviamente, o primeiro método é o mais direto e mais simples.
Uso de armazenamento na webA Web Storage armazena pares de valor-chave e o navegador o armazena como uma string. Lembre -se de convertê -los em outros formatos quando necessário.
Exceto pelos diferentes usos de sessionStorage e LocalStorage, a lista de membros é a mesma:
chave = valor: armazenar pares de valor de chave
setItem (chave, valor): salvar pares de valor-chave
getItem (chave): obtenha o par de valores de chave
RemoverItem (chave): Remova todos os pares de valor-chave
claro (): limpe todos os pares de valor-chave
Comprimento: o número de pares de valor-chave
Aqui, ainda precisamos enfatizar: o tipo de valor no método setItem (chave, valor) pode teoricamente ser de qualquer tipo, mas, na verdade, o navegador chamará o método do valor para obter seu valor de sequência e armazená -lo localmente. Portanto, se for um tipo personalizado, você precisará definir um método significativo de tostramento sozinho. Por exemplo, o exemplo a seguir é usado em conjunto com JSON.Stringify:
var pessoa = {'nome': 'Rainman', 'Age': 24};
LocalStorage.SetItem ("Me", JSON.Stringify (Pessoa));
Json.parse (localStorage.getItem ('me')). Nome; // 'Rainman'
/**
* Json.Stringify, converta dados JSON em strings
* Json.stringify ({'name': 'Fred', 'Age': 24}); // '{"Name": "Fred", "Age": 24}'
* Json.stringify (['a', 'b', 'c']); // '["A", "B", "C"]
* JSON.PARSE, JSON ANTI-SOLVAÇÃO.STRINGIFY
* Json.parse ('["a", "b", "c"]') // ["a", "b", "c"]
*/
Além disso, ao adicionar pares de valor-chave, se o número de adicionados for grande, é mais seguro verificar se há alguma exceção que exceda o limite:
tentar {
LocalStorage.SetItem (ItemId, valores.Join (';'));
} catch (e) {
if (e == quota_exceded_err) {
alerta ('cota excedida!');
}
}
O método de armazenamento da Web é muito simples. O exemplo a seguir é contar o número de cliques no botão:
<! Doctype html>
<html>
<head>
<Cript>
função clickcounter ()
{
if (typeof (armazenamento)! == "indefinido")
{
if (LocalStorage.ClickCount)
{
LocalStorage.ClickCount = Número (LocalStorage.ClickCount) +1;
}
outro
{
LocalStorage.ClickCount = 1;
}
Document.getElementById ("Result"). Innerhtml = "Você clicou no botão" + localStorage.ClickCount + "tempo (s).";
}
outro
{
Document.getElementById ("Result"). Innerhtml = "Desculpe, seu navegador não suporta armazenamento na web ...";
}
}
</script>
</head>
<Body>
<p> <button onclick = "clickcounter ()" type = "button"> clique em mim! </button> </p>
<div id = "resultado"> </div>
<p> Clique no botão para ver o contador aumentar. </p>
<p> Feche a guia do navegador (ou janela) e tente novamente, e o contador continuará a contar (não é redefinido). </p>
</body>
</html>
No exemplo acima, você pode alterar o LocalStorage para sessões, clique no botão várias vezes e verificar o efeito antes e depois de fechar o navegador.
Problemas existentesOs defeitos do armazenamento na Web estão concentrados principalmente em sua segurança, que são refletidos nos dois pontos a seguir:
1. O navegador alocará espaço de armazenamento independente para cada domínio, ou seja, o script não pode acessar o espaço de armazenamento no domínio B no domínio A, mas o navegador não verificará se o domínio em que o script está localizado é o mesmo que o domínio atual. Ou seja, os scripts incorporados no domínio A no domínio B ainda podem acessar os dados no domínio B.
2. Os dados armazenados localmente não são criptografados e nunca expirarão, o que é muito fácil de causar vazamentos de privacidade.
Além disso, para obter mais problemas relacionados à segurança, consulte o link na referência prática posteriormente.
Uma lista de outras especificações (apenas para entender, talvez desapareça a qualquer momento)Banco de dados da Web
Na antiga proposta HTML5, se você precisar armazenar dados complexos, poderá usar o banco de dados da Web, que pode usar o SQL como um programa cliente (o padrão do banco de dados da Web foi abandonado, então aqui está uma breve menção); GlobalStorageIsso também é proposto no HTML5. Depois que o navegador estiver fechado, as informações armazenadas usando o GlobalStorage ainda podem ser mantidas. Como o LocalStorage, as informações armazenadas em qualquer página no domínio podem ser compartilhadas por todas as páginas, mas atualmente apenas o Firefox as suporta.
Sintaxe básica:
• GlobalStorage ['desenvolvedor.mozilla.org'] - Todos os subdomínios sob desenvolvedor.mozilla.org podem ser lidos e escritos através deste objeto de armazenamento de namespace.
• GlobalStorage ['mozilla.org'] - Todas as páginas da web sob o nome de domínio mozilla.org podem ser lidas e escritas através deste objeto de armazenamento de namespace.
• GlobalStorage ['org'] - Todas as páginas da web sob o nome de domínio .org podem ser lidas e escritas através deste objeto de armazenamento de namespace.
• GlobalStorage [''] - qualquer página da web em qualquer nome de domínio pode ser lida e gravada através deste objeto de armazenamento de namespace.
Propriedades do método:
• setItem (chave, valor) - defina ou redefinir o valor da chave.
• getItem (chave) - obtém o valor da chave.
• RemoverItem (chave) - remove o valor da chave.
• Defina o valor da chave: window.globalStorage [planabc.net] .Key = value;
• Obtenha o valor da chave: value = window.globalStorage [planabc.net] .Key;
Outros recursos:
• O tempo de validade é o mesmo que o LocalSorage, e alguns outros recursos também são semelhantes ao LocalSorage.
• O Firefox agora suporta apenas o armazenamento globalStorage sob o domínio atual. O uso de um domínio comum causará um código de erro de segurança de erro semelhante: 1000.
IndexeddbFinalmente, queremos introduzir indexedDB. Comparado com as outras duas especificações, apenas o Firefox implementa o indexedDB (a propósito, a Mozilla diz que nunca implementará o banco de dados SQL da Web), mas o Google disse que está pensando em adicionar suporte de indexdb ao Chrome.
O indexedDB apresenta o conceito de um armazenamento de objetos, que é um pouco como um banco de dados SQL, onde você pode armazenar registros no banco de dados, e cada registro pode ter muitos campos, cada campo possui um tipo de dados específico, você pode escolher um subconjunto de registros e atravessá-lo com o cursor, enquanto todas as alterações no armazenamento de objetos são baseadas em transações.
Para obter mais informações, consulte a documentação sobre o indexedDB no Firefox na referência de uso posteriormente.
Referência prática:Documento oficial: http://www.w3schools.com/html5/
Preocupações com modelos: http://www.cuoxin.com/w3school/html5/
Segurança do armazenamento local: http://www.mhtml5.com/2012/03/4586.html
Recursos experimentais do Firefox IndexedDB: https://developer.mozilla.org/en-us/docs/indexeddb