Dado que HTTP no tiene estado, ¿quién eres tú? ¿Qué hiciste? Lo sentimos, el servidor no lo sabe.
Entonces aparece la sesión, que almacena información del usuario en el servidor para uso futuro (como nombre de usuario, compras en el carrito de compras, etc.).
Pero la sesión es temporal y será eliminada cuando el usuario abandone el sitio web. Si desea almacenar información de forma permanente, ¡puede guardarla en una base de datos!
Cómo funciona la sesión: cree una identificación de sesión (¡¡¡principal!!!) para cada usuario. La identificación de la sesión se almacena en la cookie, lo que significa que si el navegador desactiva las cookies, la sesión dejará de ser válida. (Pero se puede lograr de otras maneras, como pasar la identificación de la sesión a través de la URL)
La autenticación de usuario generalmente utiliza sesión.
galletas:Propósito: Datos almacenados localmente en el lado del cliente (generalmente encriptados) para que un sitio web identifique a un usuario.
La cookie se transportará (incluso si no es necesaria) en la solicitud http desde el mismo origen, es decir, se transmitirá de un lado a otro entre el cliente y el servidor.
El tamaño de los datos de la cookie no supera los 4k.
Período de validez de las cookies: el período de validez de las cookies establecido es válido hasta el momento de caducidad, ¡incluso si el navegador está cerrado!
Almacenamiento local y almacenamiento de sesión:Al principio, las cookies se usaban comúnmente para el almacenamiento en caché local, ¡pero el almacenamiento web debe ser más seguro y rápido!
¡Estos datos no se guardan en el servidor (se almacenan en el cliente) y no afectan el rendimiento del servidor!
El almacenamiento de datos de sessionStorage y localStorage también tiene límites de tamaño, pero son mucho más grandes que las cookies y pueden alcanzar 5 millones o incluso más.
localStorage: almacenamiento de datos sin límite de tiempo!
sessionStorage: como se puede ver en el significado en inglés, es el almacenamiento de datos de la sesión, por lo que después de que el usuario cierra el navegador (pestaña/ventana), los datos se eliminan.
Soporte de almacenamiento web HTML5:IE8 o superior, navegador moderno.
Los datos se almacenan en pares clave-valor:
Tanto localStorage como sessionStorage tienen los siguientes métodos:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>almacenamiento web</title></head><body> <div id=test></div> <script> if (typeof (Almacenamiento) != indefinido) { localStorage.name = 'xiao ming'; localStorage.setItem('name1', 'Apple'); document.getElementById('test').innerHTML = eres: + localStorage.name ( primero: + localStorage.name1 +, + localStorage.key(0)); localStorage.removeItem('nombre1'); console.log(segundo: + localStorage.name1); console.log(tercero: + localStorage.getItem('nombre')); localStorage.clear(); document.getElementById('test').innerHTML = ¡Actualiza tu navegador! Actualmente el navegador no soporta stroage;Resultados de ejecución del programa:
Nota: Los pares clave-valor se almacenan como cadenas y el tipo debe cambiarse según los requisitos (por ejemplo, para sumar, cambie al tipo Número).
Caché de aplicaciones HTML5:Al crear un archivo de manifiesto de caché, las aplicaciones web se pueden almacenar en caché y acceder a ellas sin una conexión de red.
Ventajas de la caché de aplicaciones:1. Navegación sin conexión;
2. Velocidad más rápida: los recursos almacenados en caché se cargan más rápido;
3. Reducir la carga del navegador: el cliente solo descargará o actualizará los recursos modificados del servidor
Estado de soporte:
IE10 o superior, navegador moderno.
usar:
<!DOCTYPE html><html manifest=demo.appcache></html>
Nota: Para habilitar el caché de la aplicación, debe especificar el atributo de manifiesto (extensión: .appcache); si no se especifica el atributo de manifiesto, la página no se almacenará en caché (a menos que la página se especifique directamente en el archivo de manifiesto).
El archivo de manifiesto debe estar configurado correctamente con tipo MIME: texto/cache-manifest en el servidor.
Archivo de manifiesto:El manifiesto es un archivo de texto simple que le indica al navegador qué está almacenado en caché y qué no.
El manifiesto se puede dividir en tres partes:MANIFESTO DE CACHÉ: ¡Los archivos enumerados aquí se almacenarán en caché después de la primera descarga!
RED: Los archivos enumerados en este elemento requieren una conexión de red con el servidor y no se almacenarán en caché.
RESERVA: ¡Este elemento enumera la página de respaldo cuando no se puede acceder a la página (como: página 404)!
prueba.appcache:
CACHE MANIFEST#2017 11 21 v10.0.1/test.css/logo.gif/main.jsNETWORK/login.php/register.phpFALLBACK#/html/Cuando no se pueda acceder a los archivos en el directorio, use /offline.html en lugar de /html/ / fuera de línea.htmlActualizar caché de la aplicación:
1. ¡El usuario borra el caché del navegador!
2.Se cambia el archivo de manifiesto (#: indica un comentario, y si se cambia a #2018 1 1 v20.0.0, ¡el navegador volverá a almacenar en caché!)
3. ¡El programa actualiza el caché de la aplicación!
Trabajadores web:Los trabajadores web son javascript que se ejecutan en segundo plano, son independientes de otros scripts y no afectarán el rendimiento de la página.
Al ejecutar un script en una página HTML general, la página no responderá a menos que se cargue el script.
Soporte: IE10 o superior, navegadores modernos
Ejemplo: archivo html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=es decir=edge> <title>trabajador web</title></head><body> <p>Recuento: <id de salida=count></output></p> <botón onclick=startWorker()>Inicio</button> <button onclick=overWorker()>Fin</button> <script> var w; function startWorker(){ // Comprobar si el navegador admite el trabajador web if(typeof(Worker) !=='undefinido'){ if(typeof(w)=='undefinido'){ //Crear objeto de trabajo web w=new Worker('testWorker.js'); El evento continúa siendo escuchado (incluso si el script externo se ha completado) a menos que finalice w.onmessage=function(event){ document.getElementById('count').innerHTML=event.data }; ('count' ).innerHTML='El navegador no admite trabajadores web'; } } function overWorker() { // Terminar web Objeto de trabajo, libera recursos del navegador/computadora w.terminate(); w=undefinido } </script></body></html>Archivo testWorker.js:
var i=0;function timedCount() { i+=1; // La parte importante, devolver un fragmento de información a la página html postMessage(i); setTimeout('timedCount()',500);}timedCount();Nota 1: Por lo general, los trabajadores web no se utilizan para tareas tan simples, sino para tareas que consumen más recursos de CPU.
Nota 2: La ejecución en Chrome provocará el error "no se puede acceder desde el origen 'nulo'". Mi solución es: abrir Apache en xampp y usar http://localhost/ para acceder.
Desventajas del trabajador web:Dado que el trabajador web está ubicado en un archivo externo, no puede acceder a los siguientes objetos de JavaScript:
El evento enviado por el servidor es una transferencia de información unidireccional; ¡la página web puede obtener actualizaciones automáticamente del servidor!
Anteriormente: la página web primero preguntó si había actualizaciones disponibles, el servidor envió los datos y se realizaron las actualizaciones (transferencia de datos bidireccional).
Estado de soporte: ¡Todos los navegadores modernos, excepto IE, lo admiten!
Código de muestra: archivo html:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta nombre=viewport content=ancho=ancho del dispositivo, escala inicial=1.0> <meta http-equiv=X-UA -Contenido compatible=ie=edge> <title>evento enviado cortado</title></head><body> <p>información del evento enviado cortado</p> <div id=test></div> <script> // Determina si el navegador admite EventSource if(typeof(EventSource)!==undefinido){ // Crea un objeto EventSource var source=new EventSource(test.php); Escucha de eventos source.onmessage=function(event){ document.getElementById('test').innerHTML+=event.data+<br> }else{ document.getElementById('test').innerHTML=lo siento, el navegador no admite el evento enviado por el servidor } </script></body></html>;prueba.php：
<?phpheader('Content-Type:text/event-stream');header('Cache-Control:no-cache');$time=date('r');echo data:La hora del servidor es: {$ time} /n/n;// Actualizar datos de salida flux();Nota: No hay contenido detrás, ¿se puede omitir el archivo php?> ¡Cerrar!
WebSocket HTML5:¡WebSocket se puede utilizar para la comunicación entre varias pestañas!
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.