O armazenamento da Web é um recurso muito importante introduzido pelo HTML5.
O armazenamento da Web é dividido em dois tipos:
Ele pode ser visto claramente a partir do significado literal.
Seja SessionStorage ou LocalStorage, as APIs que podem ser usadas são as mesmas.
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!