Antes do H5, o armazenamento era usado principalmente com cookies. As desvantagens dos cookies estão com dados na cabeça da solicitação e o tamanho está dentro de 4K. Lord Domain Poluição.
Principais aplicativos: carrinho de compras, login de clientes
Para o navegador do IE, existem dados do usuário, o tamanho é de 64k, suportado apenas pelo navegador do IE.
AlvoO armazenamento de maneira chave, armazenamento permanente, nunca falha, a menos que seja excluído manualmente.
tamanho:Cada nome de domínio 5m
Situação de apoio:Nota: O IE9 LocalSorage não suporta arquivos locais.
Método de detecção: if (if (window.localStorage) {alert ('Este navegador suporta LocalStorage');} else {alert ('Este navegador não suporta localStorage');} API comum:getItem // Recebe recordes
Setititen // Settings Record
RemoverItem // Remova o registro
Chave // pega o valor correspondente à chave
Clear // Clear Records
Conteúdo de armazenamento:Array, fotos, json, estilo, script. Essência Essência (Contanto que possa ser serializado em um conteúdo de string, ele pode ser armazenado)
2. Sessão de armazenamento localLocalStorage na API de armazenamento local do HTML5 é o mesmo que sessões.
3. Cache offline (cache do aplicativo)O arquivo necessário para aplicativos de cache local
Como usar:① Configurar o arquivo de manifesto
Página:
<!Arquivo de manifesto:
O arquivo de manifesto é um arquivo de texto simples que informa ao navegador que o conteúdo do cache (e o conteúdo que não cache).
Os arquivos de manifesto podem ser divididos em três partes:
① Manifesto de cache -o arquivo listado neste título cache após o primeiro download
②network -Os arquivos listados sob este título precisam ser conectados ao servidor sem ser armazenado em cache
Fallback -Os arquivos listados neste título estipulam que as páginas do retiro quando a página não pode ser acessada (como a página 404)
Demoção completa:Manifesto de cache# 2016-07-24 v1.0.0/tema.css/main.jsnetwork: login.jsp Fallback: /html//offline.htmlNo servidor: o arquivo de manifesto precisa configurar o tipo MIME correto, isto é, texto/manifesto de texto/cache.
Como Tomcat:
<Mime-Mapping> <nstension> manifesto </nstension> <MIMe-Type> Texto/cache-manifest </mime-type> </mime-mapping>>API comum:
O núcleo é o objeto ApplicationCache.
0 (não
1 (ocioso): ocioso, ou seja, o cache do aplicativo não é atualizado
2 (verificação): Durante o cheque, está baixando o arquivo de descrição e verificando a atualização
3 (Download): No download, o cache do aplicativo está baixando o recurso especificado no arquivo de descrição
4 (UpdateArty): Atualizado, todos os recursos foram baixados
5 (ocioso): abandonado, ou seja, o arquivo de descrição do cache do aplicativo não existe mais, para que a página não possa acessar o cache do aplicativo
Eventos relacionados:Indica alterações na aplicação da aplicação do estado do cache:
Verificação: acionado quando o navegador procura o cache do aplicativo
Erro: acionamento ao enviar um erro durante a verificação ou download de recursos
Noupdate: acionado ao verificar o arquivo de descrição e descobriu que o arquivo não foi alterado
Download: acionado ao baixar a aplicação de recursos de cache
Progresso: acionada continuamente no processo de download de arquivos cache do aplicativo
UPDATEADY: o novo download de cache de aplicativos nas gatilhos da página
Cache: gatilhos quando o cache do aplicativo está completo disponível
Três vantagens do cache do aplicativo:① Navegue offline
② Aumente a velocidade de renda facial da página
③ Reduza a pressão do servidor
Observação:
1. O limite de capacidade do navegador nos dados do cache pode não ser o mesmo (as restrições definidas por alguns navegadores são de 5 MB por site)
2. Se o arquivo de manifesto, ou um arquivo listado no interior, não poderá ser baixado normalmente, todo o processo de atualização será considerado falha e o navegador continuará a usar o cache antigo
3. Citação do HTML de manifesto deve ser o mesmo que o arquivo manifesto, sob o mesmo domínio
4. O navegador cache automaticamente o arquivo HTML do arquivo de manifesto, que fará com que a versão de atualização seja atualizada se o conteúdo HTML for alterado.
5. O cache no arquivo de manifesto não tem nada a ver com rede e fallback.
6. Os recursos em fallback devem ser os mesmos que o arquivo de manifesto
7. Depois de atualizar a versão, ela deve ser atualizada uma vez para iniciar a nova versão (a situação da página será escovada uma vez) e a versão de monitoramento do evento precisa ser adicionada.
8. Mesmo que as outras páginas do site não estejam configuradas, o recurso de solicitação pode ser acessado a partir do cache no cache
9. Quando o arquivo de manifesto mudar, a solicitação de recurso em si também acionará a atualização
A diferença entre cache offline e cache tradicional do navegador:1. O cache offline é para todo o aplicativo, o cache do navegador é um único arquivo
2. Você pode abrir a página se tiver uma desconexão de cache offline.
3. O cache offline pode notificar ativamente o navegador para atualizar os recursos
4.Web SQLBanco de dados relacional, acesso através da instrução SQL
A API do banco de dados da Web SQL não faz parte da especificação HTML5, mas é uma especificação independente, introduzindo um conjunto de APIs que usam o SQL para operar bancos de dados de clientes.
Situação de apoio:O banco de dados da Web SQL pode funcionar na versão mais recente do navegador Safari, Chrome e Opera.
Método central: ①Pendatabase: Este método usa bancos de dados existentes ou novos bancos de dados para criar um objeto de banco de dados. ②Transaction: Este método nos permite controlar uma transação e executar envio ou reversão com base nessa situação. ③ ExecutesQL: Este método é usado para executar consultas SQL reais. Abra o banco de dados: var db = opendatabase ('mydb', '1.0', 'teste db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为 ： ： 数据库名称、版本号、描述文本、 Tamanho do banco de dados, retorno de chamada de criação Execute a operação de consulta: Var db = opendatabase ('mydb', '1.0', 'teste db', 2 * 1024 * 1024); Insira dados: Var db = opendatabase ('mydb', '1.0', 'teste db', 2 * 1024 * 1024); 1, winty) '); Leia os dados: Db.transaction (function (tx) {tx.executesql ('selecione * de win', [], function (tx, resultados) {var len = resulta.rows.length, msg = <p> Número do registro de consulta: +len +</p>; }}, nulo);});Pode ser visto nessas operações que basicamente usam instruções SQL para executar operações relacionadas ao banco de dados.
5.IndexedDBA API de banco de dados de índice (IndexedB) (como parte do HTML5) é útil para criar um aplicativo Web HTML5 offline com dados de armazenamento ricos em dados. Ao mesmo tempo, também ajuda os dados locais de cache, para que os aplicativos da Web on -line tradicionais (como aplicativos da Web móveis) possam ser executados e respondem mais rapidamente.
API assíncrona:A maioria das operações no indexedDB não é nossos métodos de chamada comumente usados, retornando os resultados do resultado, mas o modo de resposta de solicitação, como abrir a operação do banco de dados
Dessa forma, quando abrimos o banco de dados, na verdade retornamos um objeto DB, e esse objeto estava em resultado. Como pode ser visto na figura acima, exceto para o resultado. Vários atributos importantes são o OnError, Onsuccess, OnUpGradEneeded (quando solicitamos o número da versão do banco de dados e o número da versão do banco de dados existente é inconsistente). Isso é semelhante ao nosso pedido de Ajax. Depois de iniciarmos essa solicitação, não conseguimos determinar quando foi bem -sucedido, por isso precisamos processar alguma lógica no retorno de chamada.
Desligue e exclua: Função fechadab (db) {db.close ();} função deletedb (nome) {indexeddb.deleteDatabase (nome);} Armazenamento de dados:Não há conceito no indexedDB, mas o ObjectStore. Em outras palavras, um objeto é equivalente a uma tabela, associada a cada peça de dados armazenados nela.
Podemos usar um campo especificado em cada registro como valores -chave (Keypath) ou usar o número de geração automática como valores -chave (KeyGenRator) ou não especificado. Diferentes tipos de escolha de chaves, a estrutura de dados que o ObjectStore pode armazenar também pode ser armazenada.
O acima é todo o conteúdo deste artigo.