¿Es posible conservar (sin recargar) el estado de la página AJAX al hacer clic en el botón ATRÁS?

StackOverflow https://stackoverflow.com/questions/34227

  •  09-06-2019
  •  | 
  •  

Pregunta

Estoy familiarizado con varios enfoques para hacer que el botón Atrás funcione en aplicaciones AJAX en diversas situaciones, pero no he encontrado una solución que funcione correctamente en mi escenario específico.

Las páginas con las que estoy trabajando son la interfaz de búsqueda de un sitio.Ingresa términos en un cuadro de búsqueda normal, hace clic en "ir y termina en una página de resultados de búsqueda".En la página de resultados de búsqueda hay un montón de controles de interfaz de usuario para filtrar/ordenar los resultados de búsqueda para encontrar lo que busca.Algunas de las operaciones activadas por estos controles pueden tardar (relativamente) mucho tiempo en completarse (p. ej.varios segundos).

Esta latencia está bien en el caso de que el usuario esté inicialmente filtrando/ordenando sus resultados...hay un buen spinner AJAX y demás...sin embargo, cuando el usuario hace clic en un resultado de búsqueda y luego hace clic en el botón ATRÁS, me gustaría que la página se restaure instantáneamente al estado en que se encontraba cuando hizo clic.

Puedo restaurar los estados usando IFRAMES/identificadores de fragmentos como un diccionario del historial de la página, pero lo que termina sucediendo es que cuando el usuario presiona por primera vez el botón Atrás, se carga la página inicial, luego (re) realiza la consulta AJAX para obtener el estado de la página hacia atrás, lo que activa el control giratorio AJAX y otra espera de posibles varios segundos.

¿Existe algún enfoque que no requiera este tipo de carga de la página en dos etapas cuando el usuario regresa a la página mediante el botón ATRÁS?

Editado para agregar:Soy partidario de jquery, pero estaría contento con soluciones que dependan de otras bibliotecas/kits de herramientas o que sean javascript independientes/sin formato.

Editado para agregar:Debería haber agregado que estoy tratando de evitar cookies/sesiones porque esto evita que las personas tengan varias ventanas/pestañas del navegador abiertas y manipulen diferentes conjuntos de resultados de búsqueda al mismo tiempo.

Editar:Matt, ¿puedes dar más detalles sobre la solución propuesta (activar un evento de cambio de página mediante un identificador de fragmento)?Veo cómo esto ayudaría con los clics en el botón ATRÁS en la misma página pero sin regresar a la página de resultados de búsqueda después de hacer clic en un resultado específico.

¿Fue útil?

Solución

Tratar de usar almacenamiento local objeto.Aquí están las bibliotecas cruzadas jAlmacenamiento y Almacenamiento json de WEBSHIMS

Otros consejos

Sólo usa un Galleta.

¿Sería útil activar un evento de cambio de página utilizando el enfoque "Agregar información al # al final de la URL"?

De esa manera, hacer clic en el botón Atrás no debería cambiar la página y debería poder restaurar el estado sin cargar la primera página.

Utilice algo persistente que esté vinculado al perfil del usuario.

Las cookies y las sesiones son buenas ideas, pero también puedes guardarlas en la base de datos.Eso le brinda la ventaja adicional de poder guardar las preferencias de filtrado del usuario en diferentes sesiones de navegación (si, por ejemplo, estaba buscando algo en la oficina y luego decidió continuar buscando cuando regresó a casa).

Todo depende de la complejidad de los filtros y del clima o no, es algo que crees que el usuario querrá usar en diferentes sesiones de navegación.

Editado para agregar:Debería haber añadido que Estoy tratando de evitar las cookies/sesiones porque esto evita que las personas tengan Múltiples ventanas/pestañas del navegador abiertas y Manipulación de diferentes conjuntos de búsqueda resultados al mismo tiempo.

Puede crear un token aleatorio y asignarlo al identificador de fragmento.

  • en la carga de la primera página, cree un token si no se establece ningún identificador de fragmento
  • antes de salir, almacene todos los datos temporales de ajax en una cookie con ese token como índice.
  • al devolver el golpe, si tiene un identificador de fragmento configurado, cargue los datos del token correspondiente en la cookie.
  • incluso puedes agregar un campo de "hora" para caducar los tokens, etc.

cookie de muestra (JSON):

{"ajaxcache":[{"token":<token>,"time":<time>,"data":<data>}, ... ]}
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top