html5 - section - pushState: ¿para qué es exactamente el objeto de estado?

title html definicion

Question

He leído una docena de veces que el objeto de estado podría existir de múltiples pares clave | valor y que está asociado con la nueva entrada de historial. Pero, ¿podría alguien darme un ejemplo de los beneficios del objeto estatal? ¿Cuál es el uso práctico de esto? No me puedo imaginar por qué no solo escribes {}

Answer 1

El ejemplo más obvio que puedo ver para pushState , replaceState y window.onpopstate es la navegación Ajax para un sitio.

Supongamos que su sitio o aplicación web ha arreglado el nav y el footer . De esta forma, puede cargar el contenido de las páginas nuevas en un contenedor específico, por ejemplo, el nuevo elemento <main> .

Probablemente no querrás volver a cargar la página y solo cargar lo que necesites de la nueva página.

Usar el método pushState significa que podrá usar los botones Atrás y Adelante de su navegador para navegar, aunque no esté recargando la página.

Nifty, ¿eh?

De MDN :

HTML5 introdujo los métodos history.pushState () e history.replaceState (), que le permiten agregar y modificar entradas de historial, respectivamente. Estos métodos funcionan junto con el evento window.onpopstate.

El uso de history.pushState () cambia el referente que se utiliza en el encabezado HTTP para los objetos XMLHttpRequest creados después de cambiar el estado. La referencia será la URL del documento cuya ventana es esta en el momento de la creación del objeto XMLHttpRequest.

Ejemplo

Hay un gran ejemplo en MDN aquí , y el informe relevante de Git aquí .

Answer 2

Es un caso de uso específico y prospectivo el mantenimiento de la vista del usuario y el estado de los datos en una aplicación progresiva que utiliza elementos personalizados y plantillas que se dividen en la vista regionalmente.

Imagine una cuadrícula de 64 cajas como su vista, en una pantalla grande los cuadros son 147 ^ 2 por pieza

La url representa 64 / a ID de usuario abs relacionados con los datos del usuario

La aplicación web puede llenar su cuadrícula con datos de estado específicos del usuario

En este caso de uso, creo firmemente que es el futuro, el usuario no querría compartir su estado personal y las porciones de vista llenas de datos

Al usar estados de historial previos y sus 650k de datos relacionados

Se puede volver a armar una aplicación completa y compleja desde el historial y la ubicación del navegador, incluido el estado, utilizando algunos enfoques de clasificación bien conocidos.

Es genial

Answer 3

Tome este pequeño ejemplo: ejecutar violín ( vista del editor ):

Tienes una página donde un usuario puede seleccionar un color. Cada vez que lo hacen, generamos una nueva entrada de historia:

function doPushState(color) {
    var state = {},
        title = "Page title",
        path  = "/" + color;

    history.pushState(state, title, path);
};

Dejamos el objeto de estado en blanco por el momento y establecemos el URL al nombre del color (no recargue la página; esa URL no existe, por lo que obtendrá un 404).

Ahora haga clic en rojo, verde y azul una vez cada uno. Tenga en cuenta que la URL cambia. ¿Qué pasa si haces clic en el botón Atrás?

El navegador vuelve a la historia, pero nuestra página no lo nota: la URL cambia de ''/ azul'' a ''/ verde'', pero nuestra página permanece en ''Ha seleccionado azul''. Nuestra página no está sincronizada con la URL.

Esto es para lo que el evento window.onpopstate y el objeto de estado son para:

1. incluimos nuestro color seleccionado en nuestro objeto de estado

   function doPushState(color) {
       var state = { selectedColor: color },
           title = "Page title",
           path  = "/" + color;
   
       history.pushState(state, title, path);
   };

2. Luego escuchamos el evento popstate , para saber cuándo tenemos que actualizar el color seleccionado, que (en jQuery) es este:

   $(window).on(''popstate'', function(event) {
       var state = event.originalEvent.state;
   
       if (state) {
           selectColor( state.selectedColor );
       }
   });

Pruebe el ejemplo actualizado: ejecutar violín ( vista del editor ): nuestra página ahora se actualiza en consecuencia cuando el usuario navega a través del historial.