dojo tree checkbox lost when reload - checkbox

Question

I am working on .jsp page, spring MVC, dojo 1,10.2. I have created JSP page with dojo tree with checkbox. When I click next button, it takes to next jsp page. if I press back button, tree reloads and all the checkbox becomes unchecked.
How can I get the all previous checked checkbox checked , when press the back button. Do I need to save the checkbox state before going to next page and then check the checkbox referring to saved data.
Is there any other way to achieve this?

Answer 1

The web is a stateless place, so yes, you will have to save state somewhere, there are several ways to do that... you can rely on back-end services storing them in databases/files/..., or you can use one of the new HTML5 features like session storage or local storage.
With session storage for example you could do something like this:
First you need some functions to load and store the data. Since you can only store simple strings inside the session- and localstorage, I'm going to serialize them to JSON:
var store = {
save: function(object) {
sessionStorage.setItem('fruits', JSON.stringify(object));
},
load: function() {
return JSON.parse(sessionStorage.getItem('fruits') || '{}');
}
};
Then on each change you can store the data:
registry.byId("apple").on("change", function(value) {
fruits.apple = value;
store.save(fruits);
});
registry.byId("banana").on("change", function(value) {
fruits.banana = value;
store.save(fruits);
});
registry.byId("lemon").on("change", function(value) {
fruits.lemon = value;
store.save(fruits);
});
Initially you can load the data:
var fruits = store.load();
And use it to initialize the widgets their state:
registry.byId("apple").set("value", fruits.apple || false);
registry.byId("banana").set("value", fruits.banana || false);
registry.byId("lemon").set("value", fruits.lemon || false);
This is an example: http://jsfiddle.net/3b2s15xm/ Try to change the options and reload the page. Normally the checkboxes would be unchecked again, but now it will actually reload the data from the session storage when you load the page.
One thing you need to know is if the browsers you need to support, have these HTML5 capabilities, which you can check on caniuse.com.