Devido à limitação do formato de tamanho, formato e dados de armazenamento da era HTML4, se o aplicativo do site desejar armazenar parte das informações no navegador, ele só poderá ser usado para usar cookie. No entanto, essas restrições de cookies também levam a dados simples, como o cookie, podem armazenar apenas alguns identificadores, como IDs.
A seguir, é apresentada a restrição de cookies:
A maioria dos navegadores suporta cookie com um byte máximo de 4096.
O navegador também limita o número de cookies armazenados no computador do usuário. A maioria dos navegadores permite que cada site armazene 20 cookies; se você tentar armazenar mais biscoitos, o biscoito mais antigo será descartado.
Alguns navegadores também farão restrições absolutas ao número total de cookies que aceitarão em todos os sites, geralmente 300.
A situação padrão de Cookie será enviada ao servidor de segundo plano com a solicitação HTTP, mas nem todas as solicitações exigem cookies, como: JS, CSS, fotos e outras solicitações não requerem cookie.
Para quebrar uma série de restrições aos cookies, o HTML5 pode armazenar diretamente uma grande quantidade de dados para o navegador do cliente através da nova API de JS e suporta bancos de dados locais complexos para tornar o JS mais eficiente. HTML5 suporta dois tipos de WebStorage:
Existem duas APIs armazenadas no H5, uma é o armazenamento da web e o outro é o Web SQL. Não importa qual seja baseado no idioma JavaScript, ensinarei como usar o armazenamento da Web
3. Armazenamento da WebO HTML5 define o armazenamento local de armazenamento local e fornece dois tipos de armazenamento de API: SessionStorage e LocalStorage.
1. LocalStorage foi armazenado localmente e o armazenamento de dados é permanente. Após o segundo, segundo ou próximo ano, os dados ainda estão disponíveis.Recursos: ① Preservação segura e permanente no domínio. Ou seja, todas as páginas do mesmo nome de domínio no cliente ou navegador podem acessar dados e dados do LocalStorage são salvos permanentemente, exceto para excluir, mas os dados entre o cliente ou o navegador são independentes um do outro.
② Os dados não serão enviados para o servidor de segundo plano com a solicitação HTTP;
③ Não considere a oportunidade de dados de armazenamento, porque o navegador é necessário para suportar pelo menos 4 MB no padrão HTML5.
Veja um exemplo:
O código é o seguinte:
Function clickCounter () {ifof (typeof (armazenamento)! == indefinido) {if (localStorage.ClickCount) {LocalStorage.ClickCount = número (localStorage.Cl IckCount) +1;} else {LocalStorage.ClickCount = 1;} documento. GetElementById (resultado) .innerhtml = Você já clicou no botão + localStorage.ClickCount + Times;} else {document.getElementById (resultado) .innerhtml = Desculpe, seu navegador não suporta armazenamento na web. ;}} </script> <p> <botão onclick = clickcounter () type = button> clique em mim! </Button> </p> <div id = resultado> </div> <p> Clique no botão para visualizar o contador. </p> <p> Desligue a guia do navegador (ou janela), reabrir esta página, o contador continuará a contar (não redefinir). </p> 2.SessionStorage é eficaz durante a sessão e os dados são excluídos automaticamente após o fechamento do navegador;Recursos: Controle de sessão, preservação de curto prazo. O conceito de sessão é semelhante ao conceito de sessão do lado do servidor.
compatibilidade
Nota: O IE9 LocalSorage não suporta arquivos locais.
Atualmente, todos os navegadores principais suportam os recursos de armazenamento da Web do HTML5 até certo ponto. Como pode ser visto na figura acima, basicamente todos os navegadores modernos suportam o armazenamento da Web.
A plataforma Android e os respectivos navegadores da plataforma iOS basicamente suportam as características de armazenamento local do armazenamento na web. Os dispositivos móveis atuais no mercado, além dos telefones Android e iPhone, são cada vez mais tablets e dependem basicamente de duas plataformas. Usando o armazenamento da Web no terminal móvel, dificilmente precisamos considerar se o navegador é suportado.
A seguir, o método de detecção:
if (window.localStorage) {// navegador suporta LocalStorage} else {// não suporta} if (window.sessionStorage) {// O navegador suporta sessionStorage} else {// não suporta} 3. LocalStorageLocalStorage na API de armazenamento local do HTML5 é o mesmo que sessões. Tomamos o LocalSorage como exemplo, apresentamos brevemente o armazenamento local do HTML5 e fazemos alguns exemplos para problemas comuns, como o Traversal. LocalStorage é uma API armazenada localmente no HTML5. Diferentes navegadores têm suporte diferente da API, como métodos de uso, espaço de armazenamento máximo, etc.
Método de armazenamento: string de armazenamento de maneira chave. Principais aplicativos: carrinhos de compras, login de clientes, arquivo de jogos. Essência Essência Tipos de dados reservados: matriz, imagens, json, estilo, script. Essência Essência (Contanto que possa ser serializado em um conteúdo de string, ele pode ser armazenado) Endereço de armazenamento: c:/usuários/15014/AppData/local/google/chrome/dados do usuário/default/armazenamento local (diferentes computadores são diferentes, você precisa abrir a exibição do arquivo oculto, mas você pode encontrar esta pasta para pesquisar localStorage a unidade C.O LocalStorage fornece quatro métodos para nos ajudar a realizar operações relacionadas no armazenamento local.
(1) LocalStorage.SetItem (Nome da chave, Valor da chave) armazena um tipo de sequência de dados no cliente local. que o valor disso é que o valor disso é que o valor disso é que o valor do parâmetro é que o valor disso. como:
LocalStorage.SetItem (Nome, Zhang San); Valor chave de 28 dados.
(2) LocalStorage.getItem (nome da chave) Leia os dados que foram armazenados na área local e leia os dados de nome correspondente por meio do nome da chave como um parâmetro. como:
Dados var = localStorage.getItem (nome);
(3) LocalStorage.RemoveItem (nome da chave) Remova os dados que foram armazenados na área local e exclua os dados de nome correspondente por meio do nome da chave como um parâmetro. como:
var dados2 = localStorage.removeItem (nome);
(4) LocalStorage.Clear () Remova todos os dados armazenados localmente. como:
LocalStorage.clear () Remova todos os dados armazenados localmente. Como: LocalStorage.clear ();
(5) Além disso, as quatro funções no SessionStorage são basicamente as mesmas que o uso da função da classe LocalStorage acima, que não será explicada em detalhes.
O seguinte é um pequeno exemplo:
<Script Type = Text/Javascript> LocalStorage.SetItem (Nome, Zhang San); Verificar (); .getItem (idade);3. Estratégia de expiração do LocalStorage
Como o HTML5 não define uma estratégia de expiração para armazenamento local, você pode escrever seu próprio programa de estratégia de expiração ao processar a estratégia de expiração dos dados de processamento de dados, como segue:
<! Título> </ading> <body> </coder> </html> <cript> Função definida (chave, value) {Varcurtime = new Date (). : Valor, tempo: Curtime}); 'Resultados: JSON.PARSE (STR) Agência de objeto: 23 Nome: Huangxiaojian __proto__: Objeto Nota: Citações únicas são escritas, exceto {}, cada nome de atributo deve ser as cotações duplas. Json.stringify () é usado para resolver a string de um objeto, como var a = {a: 1, b: 2} resultado: json.stringify (a) {a: 1, b: 2} */} função get (chave, exp) // exp é o tempo de expiração das configurações {var value = localStorage.getItem (chave); (New Date (New Date) () .getTime () -dataobj.time> exp) // Se o horário atual -minimizador do elemento de armazenamento definido no momento da criação> tempo expirado {console.log (expira); Expiração Prompt} else {console.A operação é como mostrado na figura abaixo:
O acima é todo o conteúdo deste artigo.