Diretório de artigos
1. Armazenamento de dados
1.1 biscoito
1.1.1 Introdução ao conceito
Quando usamos funções de rede, um protocolo deve ser indispensável: o protocolo HTTP. Porém, como o protocolo HTTP não tem estado, ele será desconectado após a conexão e nenhuma informação do usuário será registrada. Nesta altura, introduzimos o conceito de cookies.
Coleção de casos JavaScriptScipt nativo
JavaScript + DOM básico
JavaScript básico a avançado
Desenvolvimento de jogos em Canvas
Cookies são dados armazenados no terminal local do usuário pelo site para identificar o usuário e rastrear a sessão. Os cookies são transportados por padrão no protocolo HTTP. Possui os seguintes recursos:
- Os dados armazenados só podem estar no formato string;
- Sob o mesmo nome de domínio, o tamanho dos arquivos armazenados é geralmente de 4 KB e o número é 50;
- Pontualidade, após um determinado período de tempo, o cookie será destruído, o período de validade mais curto é quando o navegador for fechado, o cookie será destruído;
- Por segurança, adota-se a política de mesma origem, ou seja, mesmo protocolo, mesmo nome de domínio e mesma porta, somente nessas condições a leitura pode ser realizada.
A seguir, vamos apresentar brevemente o funcionamento dos cookies:
- O cookie precisa definir nome e valor;
- O domínio do cookie, ou seja, o nome de domínio, geralmente usa a configuração padrão do domínio;
- Defina o caminho do cookie;
- Defina o prazo de validade do cookie, ou seja, o tempo de expiração do cookie.
1.1.2 Armazenamento e Aquisição
Formato do cookie: chave = valor
Visualizar cookies: Abra o navegador e mude para Aplicativo através do ponto de exclamação na frente da barra de endereço ou do console, encontre Cookies e clique
Definir e ler cookies :
//创建或修改cookie
document.cookie = "name = Jack";
//创建变量接收读取到的cookie值，并打印
var getCookie = document.cookie;
console.log(getCookie);
//通过添加expires设置过期时间
document.cookie = "name=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
Nota: 1. O tempo de expiração definido pelo cookie é baseado no horário do servidor. Depois que o navegador obtiver qualquer cabeçalho de resposta HTTP do servidor, ele sincronizará o horário do navegador com o servidor.
2. 使用new Date() 获取的本地时间并不准确，与服务器相差很大。本地时间可被客户修改，如果cookie使用本地时间可被人利用实现永久免登陆验4
Uso de cookies :
添加cookie：document.cookie = “key=value”; // 一次写入一个键值对
document.cookie = 'test1=hello';
document.cookie = 'test2=world';
//在浏览器中查看一下现在的cookie是什么样子 打开控制台 点击application 就能看到cookies
//注意 document.cookie一次只能写入一个 Cookie，而且写入并不是覆盖，而是添加
读取cookie：document.cookie;
document.cookie // "test1=hello; test2=world"
上面代码从document.cookie一次性读出两个 Cookie，它们之间使用 分号空格 分隔。必须手动还原，才能取出每一个 Cookie 的值。
var cookies = document.cookie.split('; ');
for (var i = 0; i < cookies.length; i++) {
console.log(cookies[i]);
}
// foo=bar// baz=bar
修改cookie：document.cookie = “key=value”; // 修改名为key的cookie值
document.cookie = 'test2=hah';
document.cookie // "test1=hello; test2=hah"
上面代码修改了test2对应的值
失效时间：expires ，没有设置失效时间的cookie 在浏览器关闭以后就会自动删除，如果设置了失效时候在未来的时间，就可以让cookie保存的时间长一点
设置失效时间：document.cookie = “key=value;expires=”+ oDate;
var oDate = new Date();
oDate.setDate(oDate.getDate() + 7);
document.cookie = “key=value;expires=”+ oDate;
//上面代码设置cookie的过期时间为7天以后
删除cookie：将cookie值覆盖为空，并将失效时间设置为过去的时间。
var oDate = new Date();
oDate.setDate(oDate.getDate() -7);
document.cookie = “test=;expires=”+ oDate;
//将cookie的过期时间设置为 7天前，test 这个cookie 就获取不到
1.1.3 Encapsulamento de métodos
function setCookie(name,value,n){
var oDate = new Date();
oDate.setDate(oDate.getDate()+n);
document.cookie = name+"="+value+";expires="+oDate;
}
function getCookie(name){
var str = document.cookie;
var arr = str.split("; ");
for(var i = 0; i < arr.length; i++){
//console.log(arr[i]);
var newArr = arr[i].split("=");
if(newArr[0]==name){
return newArr[1];
}
}
}
function removeCookie(name){
setCookie(name,1,-1);
}
1.1.4 Resumo
Pelo exposto, verifica-se que os cookies não são adequados para armazenar grandes quantidades de dados, pois são transmitidos a pedido de cada servidor, tornando os cookies muito lentos e ineficientes;
No HTML5, existem duas novas maneiras de armazenar dados no lado do cliente:
- armazenamento de dados localStorage sem limite de tempo
- sessionStorage é um armazenamento de dados para uma sessão
Ambos os dados não são transmitidos a cada solicitação do servidor, mas os dados só são utilizados quando solicitados, o que permite armazenar grandes quantidades de dados sem afetar o desempenho do site.
Para sites diferentes, os dados são armazenados em áreas diferentes e um site só pode acessar seus próprios dados.
1.2 armazenamento local e armazenamento de sessões
1.2.1 Visão geral
localStorage Armazenamento de nível permanente. Contanto que você visite qualquer página deste nome de domínio novamente, você poderá extrair os dados. Os dados permanecerão lá enquanto o navegador não for desinstalado. Claro, podemos excluir os dados manualmente.
sessionStorage armazenamento em nível de sessão. Só é válido na página atual, os dados serão destruídos quando a página for fechada e as páginas não poderão acessar umas às outras.
Localização no navegador:
Nota: 1. localStorage e sessionStorage são exatamente iguais em uso, ou seja, possuem a mesma API. A diferença é o que foi mencionado acima
2. Formato de dados de armazenamento local String JSON (formato de valor-chave)
1.2.2 Propriedades ou métodos para dados operacionais
H5 encapsulou as propriedades e métodos de armazenamento local da seguinte forma:
- localstorage.length obtém o número de pares de valores-chave armazenados atualmente
- localstorage.key(n) obtém o valor chave do enésimo item
- localstorage.setItem(key,value) define o par chave-valor correspondente
- localstorage.getItem(key) Obtém os dados correspondentes ao valor da chave
- localstorage.removeItem(key) limpa certos dados
- localstorage.clear() limpa todos os dados armazenados
Além de definir e obter localStorage por meio dos métodos encapsulados em H5 acima, você também pode usar o operador ponto (.) ou [] para definir e obter dados como objetos comuns :
// 以animal名字将json串catStr存储到localStorage中
localStorage.animal = catStr;
localStorage["animal"] = catStr;
1.2.3 Caso - Enviar Questionário
Exemplo de código :
<h1>新型肺炎防治知识试题</h1>
<form>
<div>
<h3>Q1：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
<div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div>
<div><input type="radio" name="q1">早发现、早报告、早诊断、早转院、早治疗</div>
<div><input type="radio" name="q1">早发现、早诊断、早隔离、早治疗</div>
<div><input type="radio" name="q1">早发现、早报告、早诊断、早治疗</div>
</div>
<div>
<h3>Q2：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
<div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div>
<div><input type="radio" name="q2">早发现、早报告、早诊断、早转院、早治疗</div>
<div><input type="radio" name="q2">早发现、早诊断、早隔离、早治疗</div>
<div><input type="radio" name="q2">早发现、早报告、早诊断、早治疗</div>
</div>
<div>
<h3>Q3：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
<div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div>
<div><input type="radio" name="q3">早发现、早报告、早诊断、早转院、早治疗</div>
<div><input type="radio" name="q3">早发现、早诊断、早隔离、早治疗</div>
<div><input type="radio" name="q3">早发现、早报告、早诊断、早治疗</div>
</div>
<div>
<h3>Q4：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
<div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div>
<div><input type="radio" name="q4">早发现、早报告、早诊断、早转院、早治疗</div>
<div><input type="radio" name="q4">早发现、早诊断、早隔离、早治疗</div>
<div><input type="radio" name="q4">早发现、早报告、早诊断、早治疗</div>
</div>
<div>
<h3>Q5：为控制“新型冠状病毒感染的肺炎”疫情的传播、蔓延、医务人员应做到（ ）</h3>
<div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div>
<div><input type="radio" name="q5">早发现、早报告、早诊断、早转院、早治疗</div>
<div><input type="radio" name="q5">早发现、早诊断、早隔离、早治疗</div>
<div><input type="radio" name="q5">早发现、早报告、早诊断、早治疗</div>
</div>
<input type="submit" value="提交">
</form>
<script>
var form = document.querySelector("form");
form.onsubmit = function(){
if(localStorage.submit){
alert("不能重复提交");
}else{
localStorage.submit = true;
alert("表单成功提交...")
}
}
</script>
1.2.4 Benefícios trazidos pelo Web Storage
-
Reduzir o tráfego de rede: Uma vez que os dados são salvos localmente, pode-se evitar a solicitação de dados do servidor, reduzindo assim solicitações de dados desnecessárias e reduzindo a transferência desnecessária de dados entre o navegador e o servidor.
-
Exibir dados rapidamente: Bom desempenho, a leitura de dados localmente é muito mais rápida do que a obtenção de dados do servidor através da rede e os dados locais podem ser obtidos instantaneamente. Além disso, a própria página da web também pode ter um cache, portanto, se toda a página e os dados forem locais, eles poderão ser exibidos imediatamente.
-
Armazenamento temporário: Em muitos casos, os dados só precisam ser utilizados enquanto o usuário navega em um conjunto de páginas, podendo os dados ser descartados após fechar a janela, neste caso é muito conveniente utilizar o sessionStorage.
apêndice:
1. Tecnologia de persistência de dados fornecida por HTML5 (armazenamento offline)
- Cache do aplicativo: os arquivos exigidos pelo aplicativo de cache local (salvar o aplicativo em si não salva dados)
- LocalStorage e SessionStorage armazenam dados no formato de par chave-valor (string JSON)
- Banco de dados relacional Web SQL, acessado por meio de instruções SQL
- Banco de dados de índice IndexDB
2. Cache de aplicativos
- Link do caso: http://m.ftchinese.com/phone.html
- Tecnologias de aplicação: Cache de Aplicação, LocalStorage, Web SQL
- Chave Cache do Aplicativo (Cache do Aplicativo): Arquivo de manifesto (lista de arquivos exigidos pelo aplicativo)
- Recursos do cache do aplicativo: Os arquivos de manifesto são atualizados somente quando mudam. Todos os arquivos no manifesto devem ser atualizados uma vez para entrar em vigor na próxima vez (as atualizações não são oportunas)