This SO answer shows a very basic usage of the JQuery Cookie library. Basically the usage is $.cookie(<cookie-key>, <cookie-value>, {<additional data about cookie>})
. (This is obviously pseudocode).
This will write a key/value cookie to the browser, which will last as long as you specify and can be fetched via $.cookie("<cookie-key>")
and deleted via $.removeCookie("<cookie-key>")
.
So for your use case, it might look like this:
HTML
<a id="gridbtn" class="click1"></a>
<a id="smallgridbtn" class="click1"></a>
<a id="largegridbtn" class="click1"></a>
// JQuery
$(document).ready(function() {
// After page load
var cookieLayoutValue = $.cookie("layout");
console.log("The cookie value was " + cookieLayoutValue);
if (cookieLayoutValue === "grid") {
// process "grid" layout
} else if (cookieLayoutValue === "smallgrid") {
// process "smallgrid" layout
} else if (cookieLayoutValue === "largegrid") {
// process "largegrid" layout
} else {
// cookie doesn't exist, default it to grid
$.cookie("layout", "grid", { expires : 999 });
// process "grid" layout
}
//
// call layout code for whatever the value is using if/else
//
// Wire up some click handlers
$("#gridbtn").click(function() {
var layout = $.cookie("layout");
$.cookie("layout", "grid", { expires : 999 });
// If the layout has changed
if (layout !== "grid") {
// Do "grid" layout processing
}
});
// Wire up some click handlers
$("#smallgridbtn").click(function() {
var layout = $.cookie("layout");
$.cookie("layout", "smallgrid", { expires : 999 });
// If the layout has changed
if (layout !== "smallgrid") {
// Do "smallgrid" layout processing
}
});
// Wire up some click handlers
$("#largegridbtn").click(function() {
var layout = $.cookie("layout");
$.cookie("layout", "largegrid", { expires : 999 });
// If the layout has changed
if (layout !== "largegrid") {
// Do "largegrid" layout processing
}
});
});
Otherwise, you'd have to send the information you want in the cookie to the server for processing. I'd recommend a RESTful service via Spring Framework and then set the cookie in the response like this.
tag will catch this code at the right time. Rewriting the cookie value means that a page refresh will pick up the last value and run with it. I've updated the snippet a bit more to show this (at the top near the $(document).ready() call.
– Blake Neal Apr 04 '16 at 12:41