Keep state of html elements when refreshing page

Question

I have some draggable and resizable DIVs on the page. I would like to keep the state of these DIVs, so when the page is refreshed, the DIVs are displayed in the same way as before the refresh.

I notice things like Facebook chat. An open chat window will remain open when the page is refreshed. Does anyone know how this is implemented? Can someone give me advice on something like this?

Answer 1

If you want to do it the way Facebook does, you will need to send AJAX requests to another of your pages at regular intervals, in the case of Facebook, this is every time you send a message. This page parses the AJAX request and updates it in the database. When you refresh the page, the database is called to see what to show in the chat.

The problem with using a cookie is the size limit (Facebook can store chat days using a database).

You also do not need to worry if the client has disabled cookies, because all information is stored on the server.

Answer 2

Mmm, not just, but possible. You must save this “state” in a cookie and then extract this cookie to the focus of the page (or load).

, javascript ,

var str = JSON.stringify(obj);

var obj = JSON.parse(str);

( JSON ).

/ javascript, ( ) , , , , .

, .

Answer 3

In the end, I just used the AJAX system, which saves data on the server side. Then, when the page reloads, it uses the saved session data to create the correct display.