html - How to save a web-application state dynamically?

Question

I would like to create a web application where a user can drag and drop images and text onto a div or similar container. Then, when the user clicks a save button, the application would be able to save the content of the dropped items, as well as the positional information for those items.

Ultimately the user should be able to come back, open then application, and have the images and text back in the exact same places as when they were saved.

If anyone knows a methodology or framework that could assist in accomplishing this, it would be appreciated.

Answer 1

When the user hits the save button, you will need to collect the dynamic state of the current web page (which sounds like images and positions) and send that to your server with some sort of user id that uniquely and securely identifies this user. The next time that user loads this web page, you can either put the state into the web page as it is retrieved from the server or you can use client-side javascript to retrieve that user's state from the server and then dynamically modify the page to match the desired state.

You can save the state to the server with either an ajax call or a post. You can retrieve the state from the server from the client javascript using an ajax call or if the state was already put into the web page by the server, you can just refer to it there.