El almacenamiento web es una característica muy importante introducida por HTML5.
El almacenamiento web se divide en dos tipos:
Se puede ver claramente desde el significado literal.
Ya sea SessionStorage, o LocalStorage, las API que se pueden usar son las mismas.
Como lo anterior, ambos y el valor deben ser cadena.
A continuación, desarrollamos un pequeño programa de la libreta de direcciones a través del almacenamiento web para demostrar el uso de API relacionadas;
1. Ingrese a la persona de contacto, el contacto tiene dos campos, el número de teléfono móvil, y el número de teléfono móvil se usa como KeyStorage como KeyStorage;
2. Encuentre al propietario de acuerdo con el número de teléfono móvil;
3. Enumere toda la información de contacto que actualmente se conserva;
Primero, prepare una página HTML simple, como sigue:
<! ; : </Etiqueta> <input type = text id = mobilePhone name = mobilePhone/> <br/> <input type = button onClick = save () valor = nuevo registro/<hr/> <etiqueta for = searc = searc h_phone> Ingrese el número de teléfono móvil: </etiqueta> <input type = text id = seech_phone name = search_phone/> <input type = button onClick = find () value = buscar el propietario de la máquina/> <p id = find_result> <br <//br </br </ > </p> </div> <br/> <div id = list> </div> </body> </html>
La interfaz muestra lo siguiente:
Para lograr la preservación del contacto, solo necesita implementar el siguiente método JS:
// Guardar la función Guardar () {var microlephone = document.getElementById (MobilePhone).Para lograr el propietario del fundador, se implementa el siguiente método JS:
// Encuentra la función de datos Find () {var seark_phone = document.getElementById (Search_phone).Para mostrar toda la información de contacto guardada, debe utilizar el método LocalStorage.Key (índice), de la siguiente manera:
// extrae todos los objetos almacenados en LocalStorage y muestre la función LoadAll () {var list = document.getElementById (list); <l> <td> nombre </td> <td> número móvil </td> </tr>; i); .innerhtml = resultado;} else {list.innerhtml = Los datos actuales están vacíos, date prisa para unir a la persona de contacto;}}El efecto es el siguiente:
Pregunta: Las demostraciones anteriores tienen solo dos campos, nombres y números de teléfono móvil. ¿No está procesado el almacenamiento web solo la cadena? En este momento, puede usar el método Stringify () de JSON para transformar objetos complejos en cadena y almacenarlos en el almacenamiento web;
La siguiente demostración simple agrega los contactos de los atributos de la compañía para guardar el código JS:
// Guardar la función de datos () {Var Contact = New Object; JSON.Stringify (Contact); GetElementById (List); > <td> <td> <td> teléfonos móviles </td> <td> empresa </td> </tr>; LocalStorage.Key (I); > <td>+conf tAct.comPany+</td> </tr>;} resultado+= </table>; la persona de contacto;}}El efecto es el siguiente:
Lo anterior es el almacenamiento local de HTML5 introducido por Xiaobian. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!