Antes de H5, el almacenamiento se usaba principalmente con cookies. Las desventajas de las cookies son con datos en el cabezal de solicitud, y el tamaño está dentro de 4K. Lord Dominio Contaminación.
Aplicaciones principales: carrito de compras, inicio de sesión del cliente
Para el navegador IE, hay datos de usuarios, el tamaño es de 64k, solo compatible con IE Browser.
ObjetivoAlmacenamiento de manera clave, almacenamiento permanente, nunca falla, a menos que se elimine manualmente.
tamaño:Cada nombre de dominio 5m
Situación de apoyo:Nota: IE9 LocalStorage no es compatible con los archivos locales.
Método de detección: if (if (window.localStorage) {alert ('este navegador admite localstorage');} else {alert ('este navegador no es compatible con LocalStorage');} API común:getItem // tomar registros
setititen // registro de configuración
RemoverItem // eliminar el registro
Clave // tomar el valor correspondiente a la clave
claro // registros claros
Contenido de almacenamiento:Matriz, Pictures, JSON, Style, Script. Esencia Esencia (Siempre que pueda serializarse en un contenido de cadena, se puede almacenar)
2. Session Storage Storage StorageLa API de almacenamiento local de LocalStoray en HTML5 es la misma que SessionStorage.
3. Cache fuera de línea (caché de la aplicación)El archivo requerido para las aplicaciones de caché local
Cómo usar:① Configurar el archivo manifiesto
Página:
<!Archivo de manifiesto:
El archivo Manifest es un archivo de texto simple que le dice al navegador que el contenido de caché (y el contenido que no almacena en caché).
Los archivos de manifiesto se pueden dividir en tres partes:
① Cache Manifest -El archivo enumerado en este título en caché después de la primera descarga
②network: los archivos enumerados en este título deben conectarse al servidor sin ser cachedol
③ Fallback: los archivos enumerados en este título estipulan que las páginas de retiro cuando no se puede acceder a la página (como la página 404)
Demostración completa:Cache Manifest# 2016-07-24 v1.0.0/thema.css/main.jsnetwork: login.jsp fallback: /html//offline.htmlEn el archivo del servidor: Manifest debe configurar el tipo MIME correcto, es decir, Text/Cache-manifest.
Como Tomcat:
<mime-mapping> <extension> manifest </extension> <mime-type> text/cache-manifest </mime-type> </mime mapping >>API común:
El núcleo es el objeto ApplicationCache.
0 (sin dejar enredado): no hay caché, es decir, no hay caché de aplicación relacionado con la página
1 (inactivo): inactivo, es decir, el caché de la aplicación no está actualizado
2 (verificación): durante el cheque, está descargando el archivo de descripción y verificación de la actualización
3 (descarga): en la descarga, el caché de la aplicación está descargando el recurso especificado en el archivo de descripción
4 (UpdateReady): Actualizado, todos los recursos se han descargado
5 (inactivo): abandonado, es decir, el archivo de descripción del caché de la aplicación ya no existe, por lo que la página no puede acceder a la memoria caché de la aplicación
Eventos relacionados:Indica cambios en la aplicación de la aplicación del estado de caché:
Verificación: activado cuando el navegador busca el caché de la aplicación
Error: activar al enviar un error durante la verificación o descarga de recursos
Noupdate: activado al verificar el archivo de descripción y descubrió que el archivo no ha cambiado
Descargar: activado al descargar la aplicación de recursos de caché
Progress: activado continuamente en el proceso de descarga de archivos caché de la aplicación
UpdateReady: la nueva descarga de caché de la aplicación en la página dispara
almacenado en caché: se desencadena cuando el caché de la aplicación está completo disponible
Tres ventajas del caché de la aplicación:① Examinar fuera de línea
② Aumente la velocidad del ingreso facial de la página
③ Reducir la presión del servidor
Nota:
1. El límite de capacidad del navegador en los datos de caché puede no ser el mismo (las restricciones establecidas por algunos navegadores son de 5 MB por sitio)
2. Si el archivo de manifiesto, o un archivo en el interior, no se puede descargar normalmente, todo el proceso de actualización se considerará como falla, y el navegador continuará usando el caché anterior
3. Cita El HTML de manifiesto debe ser el mismo que el archivo manifiesto, bajo el mismo dominio
4. El navegador almacenará en caché automáticamente el archivo HTML del archivo manifiesto, lo que hace que la versión de actualización se actualice si se cambia el contenido HTML.
5. El caché en el archivo manifiesto no tiene nada que ver con la red y el retroceso.
6. Los recursos en el respaldo deben ser los mismos que el archivo manifiesto
7. Después de actualizar la versión, debe actualizarse una vez para iniciar la nueva versión (la situación de la página se cepillará una vez), y la versión de monitoreo del evento debe agregarse.
8. Incluso si las otras páginas en el sitio no están configuradas, se puede acceder al recurso de solicitud desde el caché en el caché
9. Cuando cambia el archivo manifiesto, la solicitud de recursos en sí también activará la actualización
La diferencia entre el caché fuera de línea y el caché tradicional del navegador:1. El caché fuera de línea es para toda la aplicación, el caché del navegador es un solo archivo
2. Puede abrir la página si tiene una desconexión de caché fuera de línea.
3. El caché fuera de línea puede notificar activamente al navegador que actualice los recursos
4.Web SQLBase de datos relacional, acceso a través de la declaración SQL
La API de la base de datos SQL web no forma parte de la especificación HTML5, pero es una especificación independiente, que introduce un conjunto de API que usa SQL para operar bases de datos de clientes.
Situación de apoyo:La base de datos web SQL puede funcionar en la última versión del navegador Safari, Chrome y Opera.
Método central: ①Pendatabase: este método utiliza bases de datos existentes o nuevas bases de datos para crear un objeto de base de datos. ②Transaction: este método nos permite controlar una transacción y realizar envío o reversión en función de esta situación. ③ Ejecutesql: este método se utiliza para realizar consultas SQL reales. Abra la base de datos: var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为 ： ： ： Tamaño de base de datos, devolución de llamada de creación Ejecutar la operación de consulta: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); Insertar datos: Var db = opendatabase ('mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, Winty) '); Leer datos: Db.Transaction (function (tx) {tx.executesql ('select * de win', [], function (tx, resultados) {var len = results.rows.length, msg = <p> Número de registro: +len +</p>; }}, nulo);});Se puede ver en estas operaciones que básicamente usan declaraciones SQL para realizar operaciones relacionadas con la base de datos.
5.dexeddbLa API de la base de datos del índice (indexedB) (como parte de HTML5) es útil para crear una aplicación web HTML5 fuera de línea con datos de almacenamiento intensivos en datos intensivos. Al mismo tiempo, también ayuda a los datos de caché locales, para que las aplicaciones web en línea tradicionales (como las aplicaciones web móviles) puedan ejecutarse y responder más rápido.
API asincrónica:La mayoría de las operaciones en IndexedDB no son nuestros métodos de llamadas comúnmente utilizados, devolviendo los resultados del resultado, sino el modo de respuesta a la solicitud, como abrir la operación de la base de datos
De esta manera, cuando abrimos la base de datos, en realidad devolvimos un objeto DB, y este objeto estaba en resultado. Como se puede ver en la figura anterior, excepto el resultado. Varios atributos importantes son OnError, OnSuccess, OnUpgradeneeded (cuando solicitamos el número de versión de la base de datos y el número de versión de la base de datos existente es inconsistente). Esto es similar a nuestra solicitud AJAX. Después de iniciar esta solicitud, no pudimos determinar cuándo fue exitoso, por lo que necesitamos procesar alguna lógica en la devolución de llamada.
Apague y elimine: Función cerrada (db) {db.close ();} función deletedb (name) {indexeddb.deletedatabase (name);} Almacenamiento de datos:No hay concepto en IndexedDB, pero ObjectStore. En otras palabras, una tienda de objetos es equivalente a una tabla, que se asocia con cada datos almacenados en él.
Podemos usar un campo especificado en cada registro como valores clave (teclado), o usar el número de generación automática como valores clave (keyGenrator), o no especificados. También se pueden almacenar diferentes tipos de claves de elección, la estructura de datos que se puede almacenar Objectstore.
Lo anterior es todo el contenido de este artículo.