armazenamento web
O HTML5 adiciona dois novos métodos de armazenamento: localStorage e sessionStorage. Antes disso, os cookies eram usados principalmente para armazenamento. Vamos falar sobre as diferenças e cenários de aplicação dos três abaixo:
armazenamento de cookies
Introdução
Os cookies são, na verdade, pequenos dados de texto (não mais do que 4 KB). Cada navegador terá uma pasta especial para armazenar dados de cookies. O conteúdo dos cookies inclui principalmente valores de chave / valor e é usado para controlar a validade, a segurança e o escopo dos cookies de uso. Consiste em vários atributos opcionais. Podemos ver o cookie no navegador.
A composição geral e a função de um registro de cookie são as seguintes
composição
- Nome / Valor: Defina o nome do Cookie e o valor correspondente.Para o Cookie de autenticação, o valor Value inclui o token de acesso fornecido pelo servidor web.
- Expires / Max-Age: Defina o tempo de vida do cookie (formato GMT). Por padrão, o valor do atributo é um cookie de sessão, que é armazenado apenas na memória do cliente e expira quando o usuário fecha o navegador; os cookies persistentes serão armazenados em disco rígido do usuário, não se tornará inválido até que o tempo de vida expire ou o usuário clique diretamente no botão "Logout" na página da web para encerrar a sessão. Max-Age é o nome no protocolo http / 1.1 e a unidade é o segundo. Existem três valores possíveis para a idade máxima: negativo, 0 e positivo. Número negativo: período válido da sessão; 0: excluir cookie; número positivo: o período válido é o tempo de criação + idade máxima.
- Caminho: define o diretório onde o cookie pode ser acessado no site.
- Domínio: especifica o site ou domínio que pode acessar o cookie. O domínio proíbe a configuração de nomes de domínio genéricos de primeiro nível, como .org.com , principalmente para reduzir o escopo dos ataques de cookies.
- Seguro: especifique se deseja usar o protocolo de segurança HTTPS para enviar cookies. Se definido, é equivalente a apenas inserir dados de cookies na solicitação quando uma solicitação segura (https) é enviada. O uso do protocolo de segurança HTTPS pode proteger os Cookies de serem roubados e adulterados durante o processo de transmissão entre o navegador e o servidor web.
- HTTPOnly: evita que scripts do lado do cliente acessem cookies por meio do atributo document.cookie, que ajuda a proteger os cookies de serem roubados ou adulterados por ataques de script entre sites.
Para obter mais informações sobre cookies e proteção de segurança, consulte a Enciclopédia Baidu
Cenário de aplicação
Os dados do cookie são colocados automaticamente na solicitação http sempre que uma solicitação do navegador é enviada. O navegador tem opções de configuração relacionadas para determinar se cada solicitação precisa incluir esses dados do cookie. Com base neste recurso, o cookie é E armazena os dados que deve ser transmitido para cada solicitação, como informações de autenticação de identidade.
Manipular cookies
Podemos obter ou definir dados de cookies não HttpOnly executando document.cookie no console e usar ponto-e-vírgula para separar os atributos de dados.
Se você quiser modificar um cookie, você só precisa reatribuir o valor, o valor antigo será substituído pelo novo valor. Mas deve-se notar que ao definir um novo cookie, as opções de caminho / domínio devem permanecer as mesmas do cookie antigo. Caso contrário, o valor antigo não será modificado, mas um novo cookie será adicionado.
Excluir um cookie também é bastante simples e também é reatribuído, desde que a opção de expiração desse novo cookie seja definida para um ponto no passado. Mas também observe que o caminho / domínio / opções devem permanecer iguais ao cookie antigo.
Observação: a vírgula, o ponto-e-vírgula e o espaço no cookie são considerados símbolos especiais. Se esses três caracteres especiais existirem na chave e no valor, eles precisam ser codificados com escape e decodificados com unescape.
localStorage
localStorage é o armazenamento de dados sem limite de tempo e o espaço de armazenamento é geralmente de 5M
Método comum
- Salvar dados: localStorage.setItem (chave, valor);
- Dados de leitura: localStorage.getItem (key);
- Exclua um único dado: localStorage.removeItem (key);
- Exclua todos os dados: localStorage.clear ();
- Obtenha a chave de um índice: localStorage.key (index);
- Determine se há um valor de propriedade: localStorage.hasOwnProperty (key);
Os dados em localStorage são armazenados de forma chave / valor, podemos usar diretamente. Ou [] para acessar o valor da chave especificada, da seguinte maneira:
// 更推荐采用.setItem，.getItem的方式获取
localStorage.name = 'myname'
localStorage['name'] //myname
Por padrão, o valor de localStorage só pode armazenar strings. Podemos armazenar arrays ou objetos por meio da conversão JSON.
var users = [
{
name: "xiaoming",
grade: 1
},
{
name: "teemo",
grade: 3
}
]
//写入
var usersStr = JSON.stringify(users);
localStorage.user = usersStr
//读取
var newUser = JSON.parse(localStorage.user)
sessionStorage
Para o armazenamento de dados de uma sessão, quando o navegador é fechado ou a página da web é fechada, os dados armazenados são apagados e o espaço de armazenamento é geralmente de 5M.
Método comum
- Salvar dados: sessionStorage.setItem (chave, valor);
- Dados de leitura: sessionStorage.getItem (key);
- Exclua um único dado: sessionStorage.removeItem (key);
- Exclua todos os dados: sessionStorage.clear ();
- Obtenha a chave de um índice: sessionStorage.key (index);
Observação : a única diferença entre localStorage e sessionStorage é que eles armazenam dados por diferentes períodos de tempo. Ao armazenar dados, todos são armazenados no modo de string. Portanto, você deve prestar atenção ao problema de conversão de tipo ao buscar dados do armazenamento.
Cache de aplicativo H5
O HTML5 fornece armazenamento em cache do aplicativo, criando um arquivo de manifesto em cache para criar uma versão offline do aplicativo da web. Isso significa que podemos acessá-lo offline.
O armazenamento em cache do aplicativo depende do arquivo de manifesto, que informa ao navegador o que está armazenado e o que não está. O conteúdo do arquivo pode ser dividido em três partes:
- MANIFESTO DE CACHE - Os arquivos listados neste título serão armazenados em cache após o primeiro download
- REDE - Os arquivos listados neste título requerem uma conexão com o servidor e não serão armazenados em cache
- FALLBACK-Os documentos listados sob este título especificam a página de fallback quando a página está inacessível (como uma página 404)
A seguir está um exemplo de arquivo de manifesto:
CACHE MANIFEST
# 2012-02-21 v1.0.0 这个是注释，更改注释也同样会促使浏览器更新缓存
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
# 下面参数第一个url是资源，第二个是替补
/html/ /offline.html
Como atualizar o cache
Depois que o aplicativo for armazenado em cache, ele continuará mantendo o cache, saiba o seguinte:
- O usuário limpa o cache do navegador (limpar o cache)
- O arquivo de manifesto foi modificado
- Cache do aplicativo de atualização do programa
Vantagens do cache de aplicativos
- Os usuários de navegação offline podem usá-los enquanto o aplicativo está offline
- Recursos em cache de velocidade carregam mais rápido
- Reduza a carga do servidor - o navegador só fará download de recursos atualizados ou alterados do servidor.
Nota : Se o arquivo que armazenamos em cache no servidor for modificado, o navegador não atualizará o cache, portanto, precisamos atualizar o arquivo de manifesto para acionar a atualização do cache.
Cenários de uso de cache de aplicativo HTML5
O cache de aplicativos é principalmente para fornecer cache de recursos estáticos (páginas estáticas, css, imagens, etc.). Quando há alguns elementos ou recursos que raramente mudam na página, eles podem ser armazenados em cache na forma de cache de aplicativo para evitar solicitações repetidas .Reduzir a carga do servidor.