Save state of html elements on page refresh

Question

I have some draggable and resizeable DIVs on a page. I'd like to save the sate of these DIVs so that when the page is refreshed the DIVs appear exactly as they were before refreshing.

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

Answer 1

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

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

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

Answer 2

Mmm, not simple, but possible. You should store that 'state' in a cookie, and then retrieve that cookie on page focus (or load).

As cookies only admit strings, you can convert javascript objects to strings using

var str = JSON.stringify(obj);

and to convert back use

var obj = JSON.parse(str);

(JSON functions are supported in modern browsers).

This way you can save/retrieve a javascript object, you could store (in your case) some coordinates, positions, sizes, whatever you need.

Hope this helps. Cheers