Guardar el estado de los elementos html en la actualización de la página

Question

Tengo algunos DIV arrastrables y redimensionables en una página. Me gustaría guardar el estado de estos DIV para que cuando la página se actualice, los DIV aparezcan exactamente como estaban antes de refrescarse.

Noté cosas como Facebook chat haciendo esto. Una ventana de chat abierta permanecerá abierta cuando actualice la página. ¿Alguien sabe cómo se implementa esto? ¿Puede alguien darme consejos para hacer algo similar?

Answer 1

Si desea hacerlo como lo hace Facebook, tendrá que enviar solicitudes AJAX a otra de sus páginas a ciertos intervalos, en el caso de Facebook, es cada vez que envía un mensaje. Esa página analiza la solicitud AJAX y la actualiza en la base de datos. Cuando actualiza la página, se llama a la base de datos para ver qué mostrar en el chat.

El problema con el uso de cookies es la restricción de tamaño (Facebook puede almacenar días de chat usando la base de datos).

Tampoco tendrá que preocuparse si el cliente tiene deshabilitadas las cookies porque toda la información está almacenada en el servidor.

Answer 2

Mmm, no es simple, pero es posible. Debe almacenar ese 'estado' en una cookie, y luego recuperar esa cookie en el foco de la página (o cargar).

Como las cookies sólo admiten cadenas, puede convertir objetos JavaScript en cadenas utilizando

var str = JSON.stringify(obj); 

y convertir de nuevo utilizar

var obj = JSON.parse(str); 

(JSON funciones son compatibles con los navegadores modernos).

De esta manera puede guardar/recuperar un objeto javascript, puede almacenar (en su caso) algunas coordenadas, posiciones, tamaños, lo que necesite.

Espero que esto ayude. Cheers

Answer 3

Terminé simplemente usando un sistema AJAX que guarda los datos en el lado del servidor. Luego, cuando la página se recarga, utiliza los datos de la sesión guardada para crear la visualización adecuada.