Debido a la limitación del formato de datos de tamaño, formato y almacenamiento de la era HTML4, si la aplicación del sitio web desea almacenar parte de la información en el navegador, solo se puede usar para usar Cookie. Sin embargo, estas restricciones de las cookies también conducen a datos simples como cookies solo pueden almacenar algunos identificadores como IDS.
La siguiente es la restricción de cookies:
La mayoría de los navegadores admiten cookies con un máximo de 4096 byte.
El navegador también limita el número de cookies almacenadas en la computadora del usuario. La mayoría de los navegadores solo permiten que cada sitio almacene 20 cookies;
Algunos navegadores también harán restricciones absolutas en el número total de cookies que aceptarán de todos los sitios, generalmente 300.
La situación predeterminada de Cookie se enviará al servidor de fondo con la solicitud HTTP, pero no todas las solicitudes requieren cookies, como: JS, CSS, imágenes y otras solicitudes no requieren cookie.
Para descifrar una serie de restricciones en las cookies, HTML5 puede almacenar directamente una gran cantidad de datos al navegador del cliente a través de la nueva API de JS, y admite bases de datos locales complejas para hacer que JS sea más eficiente. HTML5 admite dos tipos de WebStorage:
Hay dos API almacenadas en H5, una es el almacenamiento web y la otra es Web SQL. No importa cuál se base en el idioma JavaScript, le enseñaré cómo usar el almacenamiento web
3. Almacenamiento webHTML5 define el almacenamiento web de almacenamiento local y proporciona dos tipos de almacenamiento de API: SessionStorage y LocalStorage.
1. LocalStoray se ha almacenado localmente y el almacenamiento de datos es permanente. Después del segundo, segundo o el próximo año, los datos aún están disponibles.Características: ① Preservación segura y permanente en el dominio. Es decir, todas las páginas del mismo nombre de dominio en el cliente o navegador pueden acceder a los datos de LocalStorage y los datos se guardan permanentemente, excepto para eliminar, pero los datos entre el cliente o el navegador son independientes entre sí.
② Los datos no se enviarán al servidor de fondo con la solicitud HTTP;
③ No considere la oportunidad de los datos de almacenamiento, porque el navegador debe admitir al menos 4 MB en el estándar HTML5.
Mira un ejemplo:
El código es el siguiente:
Función clickcounter () {ifof (typeof (almacenamiento)! == undefined) {if (localStorage.ClickCount) {localStorage.ClickCount = number (localstorage.cl ickcount) +1;} else {localstorage.clickCount = 1;} documento. GetElementById (resultado) .innerhtml = Ya ha hecho clic en el botón + localstorage.clickCount + Times;} else {document.getElementById (resultado) .innerhtml = Lo siento, su navegador no admite el almacenamiento web. ;}} </script> <p> <Button OnClick = ClickCounter () type = Button> ¡Haga clic en mí! </botón> </p> <div id = resultado> </div> <p> Haga clic en el botón para ver el aumento del contador. </p> <p> Apague la pestaña del navegador (o ventana), vuelva a abrir esta página, el contador continuará contando (no reiniciar). </p> 2.SessionStorage es efectivo durante la sesión, y los datos se eliminan automáticamente después de que se cierra el navegador;Características: Control de sesión, preservación a corto plazo. El concepto de sesión es similar al concepto de sesión del lado del servidor.
compatibilidad
Nota: IE9 LocalStorage no es compatible con los archivos locales.
En la actualidad, todos los navegadores convencionales admiten las características de almacenamiento web de HTML5 hasta cierto punto. Como se puede ver en la figura anterior, básicamente todos los navegadores modernos han admitido el almacenamiento web.
La plataforma Android y los respectivos navegadores de la plataforma iOS básicamente admiten las características de almacenamiento locales del almacenamiento web. Los dispositivos móviles actuales en el mercado, además de los teléfonos Android y el iPhone, son cada vez más tabletas, y básicamente dependen de dos plataformas. Usando el almacenamiento web en la terminal móvil, apenas necesitamos considerar si el navegador es compatible.
El siguiente es el método de detección:
if (window.localStorage) {// El navegador admite localStorage} else {// no admite} if (window.sessionStorage) {// El navegador admite sessionStorage} else {// no es compatible} 3. LocalStorayLa API de almacenamiento local de LocalStoray en HTML5 es la misma que SessionStorage. Tomamos LocalStorage como ejemplo, presentamos brevemente el almacenamiento local de HTML5 y hacemos algunos ejemplos para problemas comunes como el recorrido. LocalStorage es una API almacenada localmente en HTML5. Diferentes navegadores tienen un soporte diferente de la API, como métodos de uso, espacio máximo de almacenamiento, etc.
Método de almacenamiento: cadena de almacenamiento de manera clave. Aplicaciones principales: carritos de compras, inicio de sesión del cliente, archivo de juegos. Esencia Esencia Tipos de datos reservados: matriz, imágenes, json, estilo, script. Esencia Esencia (Siempre que pueda serializarse en un contenido de cadena, se puede almacenar) Dirección de almacenamiento: c:/usuarios/15014/appdata/local/google/chrome/data de usuario/almacenamiento predeterminado/local (diferentes computadoras son diferentes, debe abrir la pantalla de archivo oculto, pero puede encontrar esta carpeta para buscar en localstorage en la unidad C.LocalStorage proporciona cuatro métodos para ayudarnos a realizar operaciones relacionadas en el almacenamiento local.
(1) LocalStorage.SetItem (nombre de clave, valor clave) almacena datos de tipo de cadena en el cliente local. que el valor de esto es que el valor de esto es que el valor de esto es que el valor del parámetro es que el valor de esto en sí. como:
LocalStorage.SetItem (Nombre, Zhang SAN); valor clave de 28 datos.
(2) LocalStorage.getItem (nombre clave) Lea los datos que se han almacenado en el área local y lea los datos del nombre de clave correspondientes a través del nombre de la clave como parámetro. como:
var data = localStorage.getItem (nombre);
(3) LocalStorage.RemoveItem (nombre clave) Elimine los datos que se han almacenado en el área local y elimine los datos del nombre de clave correspondientes a través del nombre de la clave como parámetro. como:
var data2 = localStorage.RemoveItem (nombre);
(4) LocalStorage.Clear () Elimine todos los datos almacenados localmente. como:
LocalStorage.Clear () Elimine todos los datos almacenados localmente. Tales como: localStorage.Clear ();
(5) Además, las cuatro funciones en SessionStorage son básicamente las mismas que el uso de la función de la clase de almacenamiento local anterior, que no se explicará en detalle.
El siguiente es un pequeño ejemplo:
<Tipo de script = text/javascript> Verificar (); .getItem (edad);3. Estrategia de expiración de LocalStorage
Dado que HTML5 no establece una estrategia de vencimiento para el almacenamiento local, puede escribir su propio programa de estrategia de vencimiento al procesar la estrategia de vencimiento de los datos de procesamiento de datos, de la siguiente manera:
<! Título> </head> <body> </body> </html> <script> set de funciones (clave, valor) {varcurtime = new Date (). : valor, tiempo: Curtime})); // Convertir a la secuencia de cadena JSON/* Nota: JSON.Parse se usa para resolver los objetos JSON desde una cadena, como var var str = '{name: Huangxiaojian, edad: 23} 'Resultados: JSON.PARSE (STR) Agencia de objeto: 23 Nombre: Huangxiaojian __Proto__: Objeto Nota: Las citas individuales están escritas en {}, cada nombre del atributo debe ser cotizaciones duales. Json.Stringify () se usa para resolver la cadena desde un objeto, como var a = {a: 1, b: 2} resultado: json.stringify (a) {a: 1, b: 2} */} función Get (Key, Exp) // Exp es el tiempo de vencimiento de la configuración {Vare Valor = LocalStorage.getItem (Key); (Nueva fecha (nueva fecha) () .GetTime () -DataObj.time> exp) // Si el tiempo actual -minus el elemento de almacenamiento establecido en el momento de la creación> tiempo expirado {console.log (expires); Aviso de vencimiento} else {consola.La operación es como se muestra en la figura a continuación:
Lo anterior es todo el contenido de este artículo.