Right off the bat, here are the two three approaches I see:
Store the filter in a URL (Okay)
Simply get the window.location
and parse out the query string using dojo/io-query::queryToObject()
:
require(['dojo/io-query'], function (ioQuery) {
var uri = window.location.href;
var query = uri.substring(uri.indexOf("?") + 1, uri.length);
query = ioQuery.queryToObject(query);
});
(Documentation for dojo/io-query)
Store the filter in a cookie (Better)
The dojo/cookie
module makes this very, very easy:
require(['dojo/cookie', 'dojo/json'], function (cookie, json) {
var filter = { ... };
cookie("myFilter", json.stringify(filter)); //store the cookie
// json.parse(cookie("myFilter"));
// ^-- returns the cookie as a JS object
});
(Documentation for dojo/cookie)
Obviously, the user must have cookies enabled for this to work, but it's much cleaner than storing a bunch of variables in a URL for them to bookmark.
Use HTML5 Local Storage as suggested by Dimitri M: (Even better)
Check to see if the user's agent supports Local Storage, and if so, use that global variable to hold on to the filter:
require(['dojo/json'], function(json) {
function supportsLocalStorage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}
var filter = { ... };
if(supportsLocalStorage()) {
localStorage.setItem("myFilter", json.stringify(filter));
}
// json.parse(localStorage.getItem("myFilter"))
// ^-- returns the filter as a JS object
});
An advantage in using web storage is that you can store much more data than cookies can.
You could conceivably use cookies as a fallback for browsers that don't support Local Storage, (i.e. when supportsLocalStorage()
returns false
) at the cost of adding a touch more overhead to your design, so ultimately it's your call, depending on what browsers you want to support.
Browser Compatibility for Web Storage