HTML5 Armazenamento local

O armazenamento da Web é um recurso muito importante introduzido pelo HTML5.

O armazenamento da Web é dividido em dois tipos:

• StSessionStorage
• OrlocalStorage

Ele pode ser visto claramente a partir do significado literal.

Seja SessionStorage ou LocalStorage, as APIs que podem ser usadas são as mesmas.

• C Salvar dados: LocalStorage.SetItem (chave, valor);
• C LEIA dados: LocalStorage.getItem (key);
• ： Exclua um único dados: LocalStorage.removeItem (key);
• L Excluir todos os dados: localStorage.clear ();
• 索 A chave para obter um determinado índice: LocalStorage.Key (índice);

Como acima, ambos e valor devem ser string.

Em seguida, desenvolvemos um pequeno programa de livro de endereços por meio de armazenamento na web para demonstrar o uso de APIs relacionadas;

1. Digite a pessoa do contato, o contato possui dois campos, o número do telefone celular e o número do telefone celular é usado como o KeyStorage como o KeyStorage;

2. Encontre o proprietário de acordo com o número do celular;

3. Liste todas as informações de contato atualmente preservadas;

Primeiro, prepare uma página simples HTML, como segue:

 <! Largura de 320px; : </belt> <tipo de entrada = id de texto = mobilephone name = mobilephone/> <br/> <tipo de entrada = botão onclick = save () value = new Record/<hr/> <etiqueta para = Searc = Searc h_phone> Digite o número de telefone do celular: </rótulo> <Tipo de entrada = ID do texto = Search_phone Nome = Search_phone/> <Tipo de entrada = Botão OnClick = find () Valor = Encontre o proprietário da máquina/> <P ID = find_result> <BR </ > </p> </div> <br/> <div id = list> </div> </body> </html>

A interface mostra o seguinte:

Para alcançar a preservação do contato, você só precisa simplesmente implementar o seguinte método JS:

 // Salvar a função de dados SALVA () {var microlone = document.getElementById (mobilephone).

Para alcançar o proprietário do fundador, o seguinte método JS é implementado:

 // Encontre a função de dados () {var pesquisa_phone = document.getElementById (Search_phone).

Para mostrar todas as informações de contato salvas, você precisa usar o método LocalStorage.Key (Index), como segue:

 // extraia todos os objetos armazenados no localStorage e mostram a função loadall () {var list = document.getElementById (List); <l> <td> nome </td> <td> Número móvel </td> </tr>; i); .innerhtml = resultado;} else {list.innerhtml = os dados atuais estão vazios, apresse -se para se juntar à pessoa de contato;}}

O efeito é o seguinte:

Pergunta: As demonstrações acima têm apenas dois campos, nomes e números de celular. O armazenamento na web não processou apenas a string? No momento, você pode usar o método Stringify () da JSON para transformar objetos complexos em string e armazená -los no armazenamento da Web;

A seguinte demonstração simples adiciona os contatos dos atributos da empresa para salvar o código JS:

 // Salvar a função de dados SALVA () {Var Contact = New Object; json.Stringify (contato); GetElementById (List); > <td> <td> <td> telefones celulares </td> <td> Empresa </td> </tr>; LocalStorage.Key (i); > <td>+conft.company+</td> </tr>;} resultado+= </tany>; a pessoa de contato;}}

O efeito é o seguinte:

O acima é o armazenamento local do HTML5 introduzido pela Xiaobian. Muito obrigado pelo seu apoio ao site VevB Wulin!