How to use cookies with jQuery and custom url parameters

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.

Community · Accepted Answer · 2017-05-23 12:24:09Z

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.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Apr 4, 2016 at 12:09

Blake Neal

3351 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Jerry Svensson Over a year ago

Hi and thanks. i did come across that post - I still don´t understand how to write the cookie for my specific needs though. It´s very interesting but a bit hard to grasp.

Blake Neal Over a year ago

Added a use case to help clarify

Jerry Svensson Over a year ago

Hmm that did clarify a little- interesting. So I basically add the script for my layouts for each handler. stupid question - I do need to save this as its own .js or can i use it as regular script and ad it to my existing script file? Thanks again.

Blake Neal Over a year ago

You can do either. You can call a vanilla function from a JQuery click handler (since JQuery is Javascript under-the-hood). Normally HTML (including any Javascript tags) are parsed from the top-down, so adding this to the end of your HTML doc before the </body> 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.

Jerry Svensson Over a year ago

Ok clear. Thanks you very much - now I have something to work with and study, thanks again!

|

Collectives™ on Stack Overflow

How to use cookies with jQuery and custom url parameters

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related