CODEWITHSUNDEEP
javascripthtml
matt
matt

Reputation: 700

Save state of html elements on page refresh

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?

Upvotes: 5

Views: 11275

Answers (3)

matt
matt

Reputation: 700

I ended up just using an AJAX system that saves the data on the server side. Then when the page reloads, it uses saved session data to create the proper display.

Upvotes: 0

Franz Payer
Franz Payer

Reputation: 4137

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.

Upvotes: 5

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

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

Upvotes: 1

Related Questions