How to Set/Unset a Cookie With Jquery

How do I set/unset a cookie with jQuery?

Update April 2019

jQuery isn't needed for cookie reading/manipulation, so don't use the original answer below.

Go to https://github.com/js-cookie/js-cookie instead, and use the library there that doesn't depend on jQuery.

Basic examples:

// Set a cookie
Cookies.set('name', 'value');

// Read the cookie
Cookies.get('name') => // => 'value'

See the docs on github for details.

---

Before April 2019 (old)

See the plugin:

https://github.com/carhartl/jquery-cookie

You can then do:

$.cookie("test", 1);

To delete:

$.removeCookie("test");

Additionally, to set a timeout of a certain number of days (10 here) on the cookie:

$.cookie("test", 1, { expires : 10 });

If the expires option is omitted, then the cookie becomes a session cookie and is deleted when the browser exits.

To cover all the options:

$.cookie("test", 1, {
   expires : 10,           // Expires in 10 days

   path    : '/',          // The value of the path attribute of the cookie
                           // (Default: path of page that created the cookie).

   domain  : 'jquery.com', // The value of the domain attribute of the cookie
                           // (Default: domain of page that created the cookie).

   secure  : true          // If set to true the secure attribute of the cookie
                           // will be set and the cookie transmission will
                           // require a secure protocol (defaults to false).
});

To read back the value of the cookie:

var cookieValue = $.cookie("test");

UPDATE (April 2015):

As stated in the comments below, the team that worked on the original plugin has removed the jQuery dependency in a new project (https://github.com/js-cookie/js-cookie) which has the same functionality and general syntax as the jQuery version. Apparently the original plugin isn't going anywhere though.

How to delete a cookie using jQuery?

To delete a cookie with JQuery, set the value to null:

$.cookie("name", null, { path: '/' });

Edit: The final solution was to explicitly specify the path property whenever accessing the cookie, because the OP accesses the cookie from multiple pages in different directories, and thus the default paths were different (this was not described in the original question). The solution was discovered in discussion below, which explains why this answer was accepted - despite not being correct.

For some versions jQ cookie the solution above will set the cookie to string null. Thus not removing the cookie. Use the code as suggested below instead.

$.removeCookie('the_cookie', { path: '/' });

jQuery to remove div & set cookie to never show again

jQuery Cookie is no longer maintened, so I would not go for it. Instead, you can use js-cookie which is recommended as replacement by the dev team of jQuery Cookie.

Once loaded, it will be :

jQuery(document).ready(function($) {

    if (typeof Cookies.get('hide-div') !== 'undefinied') {

        $("#close-me").remove();

    }

    $(".close-button").click(function() {

        $("#close-me").remove();

        Cookies.set('hide-div', true);

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.2/js.cookie.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="close-me">

  <i class="close-button">×</i>

  Your content here

</div>

Remove Cookies In Jquery on logout button

From the reference of this question and answer from @Russ Cam
How do I set/unset cookie with jQuery?
Use this function to reuse

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = escape(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return unescape(c.substring(nameEQ.length, c.length));
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

Hope it may help :)

how to remove cookie in jquery

Try This

$.removeCookie('the_cookie', { path: '/' });

Delete ALL Cookies with jquery and set new

Following the jquery-cookie spec:

1) You call $.cookie() which should return all of the cookies on the current page.

2) Just iterate through and remove as below:

var cookies = $.cookie();
for(var cookie in cookies) {
   $.removeCookie(cookie);
}

Note: when deleting a cookie, you must pass the exact same path, domain and secure options that were used to set the cookie, unless you're relying on the default options that is.

set cookie variable in jquery

Use the jquery_cookie() plugin for this.

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

Where the_cookie is the name of your cookie. and where the_value of your cookie is the value/function it has to do.
expires 7 means that the cookie wil expire in 7 days (one week)
Path isn't nessesary,

Define the path where the cookie is valid. By default the path of the
cookie is the path of the page where the cookie was created (standard
browser behavior). If you want to make it available for instance
across the entire domain use path: '/'. Default: path of page where
the cookie was created.

You can remove the cookie using:

$.removeCookie('the_cookie');

you can read the cookie using:

$.cookie('the_cookie');

Hope it helps.

---

Related Topics