Como o HTTP não tem estado, quem é você? O que você fez? Desculpe, o servidor não sabe.
Assim surge a sessão, que armazena informações do usuário no servidor para uso futuro (como nome de usuário, compras no carrinho de compras, etc.).
Mas a sessão é temporária e será excluída quando o usuário sair do site. Se quiser armazenar informações permanentemente, você pode salvá-las em um banco de dados!
Como funciona a sessão: Crie um ID de sessão (núcleo!!!) para cada usuário. O ID da sessão é armazenado no cookie, o que significa que se o navegador desabilitar os cookies, a sessão se tornará inválida! (Mas isso pode ser feito de outras maneiras, como passar o ID da sessão pela URL)
A autenticação do usuário geralmente usa sessão.
biscoitos:Finalidade: Dados armazenados localmente no lado do cliente (geralmente criptografados) para um site identificar um usuário.
O cookie será transportado (mesmo que não seja necessário) na solicitação http da mesma origem, ou seja, repassado entre o cliente e o servidor!
O tamanho dos dados do cookie não excede 4k
Período de validade do cookie: O período de validade do cookie definido é válido até o prazo de validade, mesmo que o navegador esteja fechado!
armazenamento local e armazenamento de sessão:No início, os cookies eram comumente usados para cache local, mas o armazenamento na web precisa ser mais seguro e rápido!
Esses dados não são salvos no servidor (armazenados no cliente) e não afetam o desempenho do servidor!
O armazenamento de dados sessionStorage e localStorage também tem limites de tamanho, mas são muito maiores que os cookies e podem chegar a 5 milhões ou até mais!
localStorage: armazenamento de dados sem limite de tempo!
sessionStorage: Como pode ser visto pelo significado em inglês, é o armazenamento dos dados da sessão, portanto após o usuário fechar o navegador (aba/janela), os dados são deletados!
Suporte para armazenamento na web HTML5:IE8 ou superior, navegador moderno.
Os dados são armazenados em pares de valores-chave:
Tanto localStorage quanto sessionStorage possuem os seguintes métodos:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>armazenamento web</title></head><body> <div id=test></div> <script> if (typeof (Armazenamento) != indefinido) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); primeiro: + localStorage.name1 + , + localStorage.key(0)); console.log(segundo: + localStorage.name1); console.log(terceiro: + localStorage.getItem('nome')); document.getElementById('test').innerHTML = Atualize seu navegador! Atualmente o navegador não suporta stroage } </script></body></html>;Resultados da execução do programa:
Nota: Os pares de valores-chave são armazenados como strings e o tipo deve ser alterado de acordo com os requisitos (por exemplo, para adição, altere para o tipo Número).
Cache de aplicativo HTML5:Ao criar um arquivo de manifesto de cache, os aplicativos da web podem ser armazenados em cache e acessados sem uma conexão de rede!
Vantagens do cache de aplicativo:1. Navegação off-line;
2. Velocidade mais rápida: os recursos armazenados em cache são carregados mais rapidamente;
3. Reduza a carga do navegador: o cliente apenas baixará ou atualizará os recursos alterados do servidor
Status de suporte:
IE10 ou superior, navegador moderno.
usar:
<!DOCTYPE html><html manifest=demo.appcache></html>
Nota: Para habilitar o cache do aplicativo, você precisa especificar o atributo de manifesto (extensão: .appcache); se o atributo de manifesto não for especificado, a página não será armazenada em cache (a menos que a página seja especificada diretamente no arquivo de manifesto!)
O arquivo de manifesto deve estar configurado corretamente com o tipo MIME: text/cache-manifest no servidor.
Arquivo de manifesto:O manifesto é um arquivo de texto simples que informa ao navegador o que está em cache e o que não está em cache!
O manifesto pode ser dividido em três partes:CACHE MANIFEST: Os arquivos listados aqui serão armazenados em cache após o primeiro download!
REDE: Os arquivos listados neste item requerem uma conexão de rede com o servidor e não serão armazenados em cache!
FALLBACK: Este item lista a página substituta quando a página não pode ser acessada (como: página 404)!
teste.appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Quando os arquivos no diretório não puderem ser acessados, use /offline.html em vez de /html/ /offline.htmlAtualizar cache do aplicativo:
1. O usuário limpa o cache do navegador!
2.O arquivo de manifesto foi alterado (#: indica um comentário e se for alterado para #2018 1 1 v20.0.0, o navegador será armazenado em cache novamente!)
3. O programa atualiza o cache do aplicativo!
Trabalhadores da Web:Web workers são javascript executado em segundo plano, independente de outros scripts e não afetarão o desempenho da página!
Ao executar um script em uma página HTML geral, a página não responderá a menos que o script seja carregado!
Suporte: IE10 ou superior, navegadores modernos
Exemplo: arquivo html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Conteúdo compatível=ie=edge> <title>web trabalhador</title></head><body> <p>Contagem: <output id=count></output></p> <button onclick=startWorker()>Iniciar</button> <button onclick=overWorker()>End</button> <script> var w; startWorker(){ // Verifica se o navegador suporta web trabalhador if(typeof(Worker) !=='indefinido'){ if(typeof(w)=='indefinido'){ //Criar objeto de trabalho da web w=new Worker('testWorker.js'); O evento continua a ser ouvido (mesmo que o script externo tenha sido concluído), a menos que seja encerrado w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data } }else{ document.getElementById; ('count' ).innerHTML='O navegador não suporta web workers'; } } function overWorker() { // Encerrar web Objeto de trabalho, libera recursos do navegador/computador w.terminate();arquivo testWorker.js:
var i=0;function timedCount() { i+=1; //A parte importante, retornar uma informação para a página html postMessage(i);Nota 1: Normalmente web workers não são utilizados para tarefas tão simples, mas sim para tarefas que consomem mais recursos da CPU!
Nota 2: Executar no chrome causará o erro "não pode ser acessado da origem 'null'". Minha solução é: abra o apache no xampp e use http://localhost/ para acessar.
Desvantagens do web trabalhador:Como o web trabalhador está localizado em um arquivo externo, ele não pode acessar os seguintes objetos javascript:
O evento enviado pelo servidor é uma transferência de informações unidirecional; a página da web pode obter atualizações automaticamente do servidor!
Anteriormente: a página da web primeiro perguntava se havia atualizações disponíveis, o servidor enviava os dados e as atualizações eram feitas (transferência de dados bidirecional)!
Status de suporte: Todos os navegadores modernos, exceto o IE, suportam!
Código de exemplo: arquivo html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, escala inicial=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>servir evento enviado</title></head><body> <p>servir informações de evento enviadas</p> <div id=test></div> <script> // Determina se o navegador suporta EventSource if(typeof(EventSource)!==undefined){ // Cria um objeto EventSource var source=new EventSource(test.php); Escuta de evento source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> } }else{; document.getElementById('test').innerHTML=desculpe, o navegador não suporta evento enviado pelo servidor } </script></body></html>;teste.php:
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:A hora do servidor é: {$ time} /n/n;// Atualizar dados de saída flush();Obs: Não há conteúdo por trás, o arquivo php pode ser omitido?> Fechar!
WebSocket HTML5:WebSocket pode ser usado para comunicação entre várias guias!
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.