Question

I have an HTML canvas on which a user draws some shapes. Now suppose after drawing some shapes the user types some new url and goes to that url. When the user presses the back button of browser and comes back to my page, all of his shapes drawn earlier are gone.

What I want is to keep those shapes some where so that when user comes back he can resume with his previous shapes.
Any Idea?

Answer 1

You need to save what the user is drawing in objects, and then serialize them to JSON. When it’s serialized you can store the JSON using the localstorage, in a cookie or in a database.

Using localStorage you can save the data with:

try {
    localStorage.setItem(“jsonName”, jsonString);
} exception(e) {
    // do something
}

and later read it with:

var jsonString = localStorage.getItem(“jsonName”);

but you need a browser that has support for localStorage.

There is also compatibility issues, that you need to care of, see DOM storage.