O conteúdo desta lição é introduzir armazenamento na web, que o usa para armazenar os dados de pares de valor-chave no navegador. É funcionalmente como os cookies anteriores, mas é melhor e os dados armazenados podem ser maiores. Existem dois tipos de armazenamento na Web: armazenamento local e armazenamento de sessão, que usam o mesmo mecanismo de implementação, exceto que a visibilidade e o ciclo de vida são diferentes.
1. Use o armazenamento localUsamos o objeto LocalStorage para acessar o armazenamento local, que retorna o objeto de armazenamento, usado para armazenar os dados de pares de valor-chave. Possui as seguintes propriedades e métodos:
claro (): armazenar claramente os dados do par de valores-chave;
getItem (<Key>): obtenha valor através da chave;
Chave (<index>): obtenha o valor da chave através do índice;
Comprimento: retorna o número de pares de valor-chave;
RemoverItem (<Key>): Remova os dados especificados através da chave;
setItem (<Key>, <Value>): Adicione um par de valores-chave. Quando o par de valores-chave da chave especificada existe, a operação de atualização é implementada;
[<Key>]: Use a tecla para obter o valor especificado através do subscrito da matriz.
O objeto de armazenamento nos permite armazenar dados do par de valores-chave na forma de strings. A chave é única, o que significa que, quando usamos o método setItem para adicionar pares de valor-chave, se o valor da chave já existir, a operação de atualização será implementada. Vejamos o exemplo a seguir:
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
<estilo>
corpo> *{float: esquerda;}
Tabela {colapso da borda: colapso; margem-esquerda: 50px;}
th, td {preenchimento: 4px;}
th {text-align: right;}
Entrada {borda: preto sólido fino; preenchimento: 2px;}
Rótulo {Min-Width: 50px; Display: Inline-Block; Text-Align: Right;}
#countmsg, #buttons {margem-left: 50px; margin-top: 5px; margem-fundo: 5px;}
</style>
</head>
<Body>
<div>
<div>
Chave <Boel>: </elabel> <input id = "key" placeholder = "enter key"/> </div>
<div>
<bret> valor: </elabel> <input id = "value" placeholder = "enter value"/> </div>
<div id = "botões">
<botão id = "Adicionar"> Adicionar </botão>
<button id = "CLEAR"> claro </botão>
</div>
<p id = "countmsg"> Existem <span id = "count"> </span> itens </p>
</div>
<tabela id = "dados">
<tr>
<th> contagem de itens: </th>
<td id = "count">-</td>
</tr>
</tabela>
<Cript>
displayData ();
varons varons = document.getElementsByTagName ('botão');
for (var i = 0; i <botões.length; i ++) {
botões [i] .OnClick = HODEBTOTONPRESS;
}
Função HODEBTOTTONPress (e) {
Switch (e.target.id) {
caso 'add':
var key = document.getElementById ('key'). value;
var value = document.getElementById ('value'). value;
LocalStorage.SetItem (chave, valor);
quebrar;
caso 'claro':
LocalStorage.clear ();
quebrar;
}
displayData ();
}
Função DisplayData () {
var tabelaElement = document.getElementById ('dados');
tableElement.innerhtml = '';
var itemCount = localStorage.Length;
document.getElementById ('count'). innerhtml = itemCount;
for (var i = 0; i <itemCount; i ++) {
var key = localStorage.Key (i);
var val = localStorage.getItem (chave);
tableElement.innerhtml + = '<tr> <th>' + key + ': </th> <td>' + val + '</td> </tr>';
}
}
</script>
</body>
</html>
Vejamos os resultados em execução :O navegador não pode excluir os dados que criamos através do LocalStorage, a menos que o usuário os exclua.
2. Ouça eventos de armazenamentoOs dados armazenados através do armazenamento local são visíveis para o documento do mesmo original. Por exemplo, se você abrir dois navegadores do Chrome para acessar o mesmo endereço de URL, o armazenamento local criado em qualquer página também será visível para a outra página. No entanto, se você abrir o mesmo endereço de URL com outro navegador (como o Firefox), o armazenamento local é invisível porque eles têm fontes diferentes. O evento de armazenamento é usado para ouvir as alterações no conteúdo de armazenamento. Vamos ver quais propriedades ele contém:
Chave: retorna o valor da chave alterada;
OldValue: retorna o valor antes da alteração do valor da chave;
NewValue: Retorna o novo valor de valor cujo valor chave mudou;
URL: o endereço da URL que mudou;
Storageea: Retorna o objeto de armazenamento alterado (armazenamento local ou armazenamento de sessão).
Vejamos um exemplo abaixo:
<! Doctype html>
<html>
<head>
<title> armazenamento </title>
<estilo>
Tabela {colapso da borda: colapso;}
th, td {preenchimento: 4px;}
</style>
</head>
<Body>
<tabela id = "dados">
<tr>
<th> chave </th>
<th> OldValue </th>
<th> newValue </th>
<th> url </th>
<th> storagearea </th>
</tr>
</tabela>
<Cript>
var tabelaElement = document.getElementById ('dados');
window.onstorage = function (e) {
var row = '<tr>';
linha + = '<td>' + e.key + '</td>';
linha + = '<td>' + e.oleValue + '</td>';
linha + = '<td>' + e.newValue + '</td>';
linha + = '<td>' + e.url + '</td>';
linha + = '<td>' + (e.storageea == LocalStorage) + '</td> </tr>';
tableElement.innerhtml += linha;
}
</script>
</body>
</html>
No Exemplo 1, adicionamos, excluímos e modificamos os dados de armazenamento e serão exibidos na página Exemplo 2. O Exemplo 2 é executado normalmente no navegador Chrome, o Firefox não responde e outros navegadores não o testam.
Resultados em execução :3. Use o armazenamento da sessão
O armazenamento da sessão é o mesmo que o armazenamento local em uso, exceto que sua acessibilidade é limitada à página atual e desaparecerá após o fechamento da página. Nós o acessamos através do SessionStorage.
<! Doctype html>
<html>
<head>
<title> Exemplo </title>
<estilo>
corpo> *{float: esquerda;}
Tabela {colapso da borda: colapso; margem-esquerda: 50px;}
th, td {preenchimento: 4px;}
th {text-align: right;}
Entrada {borda: preto sólido fino; preenchimento: 2px;}
Rótulo {Min-Width: 50px; Display: Inline-Block; Text-Align: Right;}
#countmsg, #buttons {margem-left: 50px; margin-top: 5px; margem-fundo: 5px;}
</style>
</head>
<Body>
<div>
<div>
Chave <Boel>: </elabel> <input id = "key" placeholder = "enter key"/> </div>
<div>
<bret> valor: </elabel> <input id = "value" placeholder = "enter value"/> </div>
<div id = "botões">
<botão id = "Adicionar"> Adicionar </botão>
<button id = "CLEAR"> claro </botão>
</div>
<p id = "countmsg"> Existem <span id = "count"> </span> itens </p>
</div>
<tabela id = "dados">
<tr>
<th> contagem de itens: </th>
<td id = "count">-</td>
</tr>
</tabela>
<iframe src = "storage.html"> </frame>
<Cript>
displayData ();
Var Buttons = Document.getElementsByTagName ("Button");
for (var i = 0; i <botões.length; i ++) {
botões [i] .OnClick = HODEBTOTONPRESS;
}
Função HODEBTOTTONPress (e) {
Switch (e.target.id) {
caso 'add':
var key = document.getElementById ("key"). value;
var value = document.getElementById ("value"). value;
sessionStorage.SetItem (chave, valor);
quebrar;
caso 'claro':
sessionStorage.clear ();
quebrar;
}
displayData ();
}
Função DisplayData () {
var tabelaElement = document.getElementById ('dados');
tableElement.innerhtml = '';
var itemCount = sessionStorage.Length;
document.getElementById ('count'). innerhtml = itemCount;
for (var i = 0; i <itemCount; i ++) {
var key = sessionStorage.Key (i);
var val = sessionStorage.getItem (chave);
tableElement.innerhtml + = "<tr> <th>" + key + ": </th> <td>" + val + "</td> </tr>";
}
}
</script>
</body>
</html>
Efeito de corrida :Se você fizer alterações no Exemplo 3, a página no Exemplo 2 não mudará.
Resumir :O SessionStorage é usado para armazenar dados em uma sessão localmente, que só pode ser acessada nas páginas na mesma sessão e os dados serão destruídos após o término da sessão. Portanto, o SessionStorage não é um armazenamento local persistente, mas apenas um armazenamento no nível da sessão.
O LocalStorage é usado para armazenamento local persistente e os dados nunca expiram, a menos que sejam excluídos ativamente.
A diferença entre armazenamento da web e cookies: o conceito de armazenamento na web é semelhante aos cookies, a diferença é que ele foi projetado para armazenamento de maior capacidade. O tamanho do cookie é limitado e, toda vez que você solicitar uma nova página, o cookie será enviado, que invisivelmente o desperdício de largura de banda. Além disso, o cookie precisa ser especificado no escopo e não pode ser chamado de domínios. Além disso, o armazenamento da web possui setItem, getItem, removetem, me métodos claros e outros. Ao contrário dos cookies, os desenvolvedores de front-end precisam encapsular o SetCookies e o GetCookies. Além disso, cada domínio (incluindo o subdomínio) do armazenamento da Web possui espaço de armazenamento independente, e cada espaço de armazenamento é completamente independente, para que não cause confusão de dados.
Mas os cookies também são indispensáveis: a função dos cookies é interagir com o servidor e existe como parte da especificação HTTP, enquanto o armazenamento da Web é criado apenas para armazenar dados localmente.
Download do código -fonte