Tutorial introductorio de HTML5 (8) Explicación detallada de la historia
HTML5 tiene administración de historial recientemente agregada. Los usuarios pueden cambiar las páginas del historial a través de los botones "Adelante" y "Atrás". Esto permite que algunas páginas nuevas que no se abren en páginas nuevas avancen y retrocedan libremente, mejorando la experiencia del usuario.
A través del evento haschange, puedes saber cuándo han cambiado los parámetros de la URL, es decir, cuándo reaccionar. A través de la API de administración de estado, la URL del navegador se puede cambiar sin cargar una página nueva. Entonces necesitas usar el método History.pushState(). El método History.pushState() recibe tres parámetros: 1. Contenido que se almacenará 2. Título (normalmente una cadena vacía) 3. Dirección (opcional). Un pequeño ejemplo es el siguiente
Después de ejecutar el método History.pushState(), la nueva información de estado se agregará a la pila de estado histórico y la barra de direcciones del navegador se convertirá en una nueva URL relativa. Sin embargo, el navegador no envía una solicitud al servidor. Incluso si se verifica la nueva ubicación.href después de que cambie el estado histórico, se devolverá la misma dirección que en la barra de direcciones. Además, los navegadores no implementan actualmente el segundo parámetro, por lo que puede simplemente pasar una cadena vacía o un título corto. El primer parámetro debe proporcionar tanta información como sea posible para inicializar el estado de la página.
Debido a que el método History.pushState() crea un nuevo estado histórico, encontrará que también se puede utilizar el botón "Atrás". Al presionar el botón "Atrás" se activará el evento popstate del objeto de ventana. El objeto de evento del evento Popstate tiene una propiedad de estado, que contiene el objeto de estado pasado originalmente a pushState () como primer parámetro. Un pequeño ejemplo es el siguiente
El estado de actualización actualiza directamente el contenido de la barra de direcciones actual. No provoca una operación de retroceso, sino que simplemente modifica la dirección actual.
Para actualizar el estado histórico actual, puede llamar a replaceState(), y los parámetros pasados son los mismos que los dos primeros parámetros del método pushState(). Llamar a replaceState() no creará un nuevo estado en la pila de estados históricos, solo sobrescribirá el estado actual. Un pequeño ejemplo es el siguiente
Ejemplo en línea:
Aún así creó una matriz y luego guardó el contenido generado en la matriz, y se basó en el valor pasado
Leer el contenido correspondiente de la matriz.
Un problema con el historial es que el primer clic no es válido y sólo funcionará la segunda vez. Esto es muy desagradable.
Normalmente no lo necesitamos para realizar operaciones particularmente complejas, pero el hash es muy fácil de usar.
El hash consiste en agregar un # directamente después de la URL y luego puede ser detectado inmediatamente por el evento onpopstate.
Entonces podemos hacer esto: