Try playing around with the controls below and refreshing the page. Note that the state of these controls persists. This page loads jQuery, jQuery Ui, and the persistState widget. It then initializes everything like so:
$(function(){
$('.persist-state').persistState();
})
This is what the html looks like:
This is what the html looks like:
This is what the html looks like:
This is what the html looks like:
Making custom elements and widgets work with persistState is dead simple. See those Show/Hide collapsers? I just implemented them myself, and they persist!
Note, the controls do not have to be a jQuery Ui widget so long as it is possible to target them with jQuery selectors. Hint, it's relatively simple to define your own selectors
The key is to extend the $.ow.persistState.elementPeristence
object and let it
know how the object state should be both persisted and restored.
Here is the code:
The following are the contents of persistState in your localStorage: