html - formulario - input dinamico php
Conservar HTML modificado dinámicamente en el botón Atrás (6)
Es increíble, constantemente veo que esto funciona en otros sitios, pero nunca en sitios en los que estoy trabajando.
Traigo nuevos contenidos con ajax, conozco history.js y History API, no quiero cambiar la URL, solo tengo la memoria caché del navegador en el nuevo contenido HTML, de modo que cuando un usuario abandona la página y vuelve usando el botón Atrás, todavía tiene el HTML actualizado.
Veo que esto funciona todo el tiempo en otros sitios sin cambios de URL o usando el hash #.
¿Hay algún truco para que funcione o el navegador lo decide al azar?
Si no quiero usar la URL para tener esta información, ¿existe una alternativa fácil?
Autor de RES aquí, encontró su pregunta en / r / javascript
Aparentemente, Firefox recientemente agregó funcionalidad para hacer esto solo, pero no hay una "buena" forma de hacerlo cuando el navegador no lo hace por usted.
Lo que RES solía hacer era agregar un marcador # página = n donde n era su número de página. De esta manera, en la carga de la página, RES sabe que debe haber venido del botón Atrás si ya hay una ubicación. A continuación, desafortunadamente, este comportamiento particular completó ctrl-f en Firefox y Chrome cuando un hallazgo hizo que se desplazara a otra página (página = n + 1), porque un hashchange cerraría el diálogo de búsqueda que molestó a los usuarios ...
Así que ahora RES hace algunas gimnastas feas e imperfectas para adivinar si llegó o no a la página a través del botón Atrás. Cada vez que carga una nueva página, guarda ese número en sessionStorage (como localStorage, pero local en la pestaña), y al mostrarse mediante el botón Atrás, desaparece una solicitud para ese número de página.
Sin embargo: recientemente probé en FF y Chrome y parece que los cambios de hash ya no "cancelan" el diálogo de búsqueda ctrl-f, por lo que mi sugerencia sería que lo usen. Tras la carga de página, si hay un hash presente, cargue los datos relevantes determinados por ese hash.
Si quieres enloquecer realmente, puedes almacenar el contenido HTML real en localStorage y volver a cargarlo también en la carga de la página a través del botón Atrás. Esta podría no ser la forma más eficiente de hacer las cosas, y casi con certeza causaría conflictos con javascript que depende del DOM, ¡así que pise con precaución!
La "mejor" solución realmente depende de qué está haciendo exactamente tu sitio / cómo se ve o se comporta ese contenido.
Creo que esa razón puede ser que otras páginas web usan algunos servidores de fondo que proporcionan sesiones.
Si está construyendo una página html / js estática, no hay tal sesión y la página simplemente vuelve a cargar.
Puede usar cookies para lograr lo que quiere.
Durante aproximadamente una década y media, he estado usando dos trucos que descubrí una vez por dolorosa prueba y error: los valores del campo de entrada, especialmente los "ocultos", se conservan en el historial del navegador junto con la URL, y el evento onLoad. se llama al regresar a la página con los botones Atrás (o Adelante).
Esto significa que puede almacenar tanto ''estado'' como desee, en campos ocultos (recuerde ponerlos en un formulario), y luego ''rehacer'' los cambios en ''onLoad''. Por lo general, hago que la parte ''render'' se convierta en una función separada ... En otras palabras, en el momento en que se produce la dinámica, primero escribo en los campos ocultos y luego llamo a la función render. Luego reúno todas las funciones de renderizado para los diversos bits de dinámica y los llamo desde onLoad.
Me gustaría enfatizar que nunca he buscado esto en ningún manual, así que no puedo ofrecer ninguna garantía, pero lo he estado usando de manera confiable por un buen tiempo (¡desde Netscape!) Funciona con ''muchos'' navegadores (todos los IEs) , Chrome, FF, pero en cuanto a los demás, nunca lo intenté).
Si alguien tiene un modo más "correcto" y menos tedioso, por mi parte, estaré encantado de escucharlo. Pero esto parece hacer el truco.
El almacenamiento local es de una sola manera, otra forma es la persistencia del lado del servidor.
Cuando se edita / crea HTML / algunas propiedades se cambian en el lado del cliente, necesita sincronizar el cambio de estado de su página con webstorage o una base de datos a través de una api relajante (o algo similar).
Cuando regrese a la página, la página puede recuperar información almacenada del almacenamiento local ... Si usa la persistencia del lado del servidor, deberá usarla junto con una cookie de sesión para recuperar los cambios de estado del usuario, que luego se puede cargar desde el servidor.
Te recomendaría que uses cookies.
Aunque HTML5 ofrece Webstorage , con ella los valores se pueden almacenar en el navegador. También hay algunas librerías JS que manejan HTML5 Webstorage.
Nota: existen diferencias entre los tamaños de datos que cada navegador puede almacenar. Puedes encontrar más sobre esto here .
Nota2: también hubo algunos problemas con la piratería del espacio de disco del usuario, por lo que puede esperar que las políticas sobre el uso de webstorage se actualicen. (Http://feross.org/fill-disk/)
Puedes lograr tu objetivo usando History.js de esta manera:
function manageHistory(data){
var History = window.History;
if ( !History.enabled ) { return false; }
History.replaceState({myData: data}, null);
}
$(''select.select'').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer
e.preventDefault();
// get data from your select tag
manageHistory( data)
});
History.Adapter.bind(window, ''statechange'', function() {
var State = History.getState();
// Launch the ajax call and update DOM using State.data.myData
});
Según la documentación sobre el historial en el sitio de Mozilla, el tercer parámetro de PushState es:
URL - ....... Este parámetro es opcional; si no se especifica, se establece en la URL actual del documento.