如何使用带有jQuery和自定义url参数的cookie

Question

I have three buttons that add parameters to my url - something like this:

<a class="click1">/a> = ?param=grid
<a class="click1">/a> = ?param=smallgrid
<a class="click1">/a> = ?param=largegrid

These buttons shows three different layout - the first one is set as default.

I want to place the users choice in a cookie - but I need the url only to be added to the relevant pages.

The url looks like this:

 /products/Computers/Notebooks?param=list

so I want the cookie to execute the choice based on the url has /products or even better - a body class if possible.

I have added the jquery.cookie.js plugin to my site - but i cant figure out how to use it.

Answer 1

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 .