jQuery can be used to manipulate browser cookies and this little demonstration shows you how to create, access and remove cookies using a jQuery plugin developed by Klaus Hartl under a GLP licence.
<html>
<head>
<title>jquery cookie
<script type="text/javascript" src="jquery-1.2.1.min.js">
<script type="text/javascript" src="jquery.cookie.js">
<script type="text/javascript">
$(function($) {
function displayMessage(msg) {
$('#message').html(msg).css({color: 'green'});
}
displayMessage('jQuery cookie plugin test');
$('#setSessionCookie').click(function() {
$.cookie('test', 'Hmmm, cookie');
displayMessage("Cookie 'test' has been set.");
});
$('#setCookie').click(function() {
$.cookie('test', 'Hmmm, cookie', { expires: 7 });
displayMessage("Cookie 'test' has been set and will expire in 7 days.");
});
$('#getCookie').click(function() {
displayMessage("The value of the cookie named 'test' is: " + $.cookie('test'));
});
$('#deleteCookie').click(function() {
$.cookie('test', null);
displayMessage("Cookie 'test' has been deleted.");
});
$('#testCookiesEnabled').click(function() {
$.cookie('testcookiesenabled', null);
$.cookie('testcookiesenabled', 'enabled');
if ($.cookie('testcookiesenabled')) {
displayMessage("Cookie: "+ $.cookie('testcookiesenabled'));
} else {
displayMessage("Cookies disabled");
$.cookie('testcookiesenabled', null);
}
});
});
</script>
</head>
<body>
<p><span id="message" style="forecolor: red;">
</p><p><input type="button" id="testCookiesEnabled" value="Cookies enabled?"/>
<p><input type="button" id="setSessionCookie" value="Set session cookie"/&</p>
<p><input type="button" id="setCookie" value="Set cookie expires in 7 days"/></p>
<p><input type="button" id="getCookie" value="Show cookie value"/></p>
<p><input type="button" id="deleteCookie" value="Delete the cookie"/></p>
</body>
</html>jquery.cookie.js
/**
* Cookie plugin
*
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
/**
* Create a cookie with the given name and value and other optional parameters.
*
* @example $.cookie('the_cookie', 'the_value');
* @desc Set the value of a cookie.
* @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @desc Create a cookie with all available options.
* @example $.cookie('the_cookie', 'the_value');
* @desc Create a session cookie.
* @example $.cookie('the_cookie', null);
* @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
*
* @param String name The name of the cookie.
* @param String value The value of the cookie.
* @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
* @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.
* @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
* @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
* @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).
* @type undefined
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
/**
* Get the value of a cookie with the given name.
*
* @example $.cookie('the_cookie');
* @desc Get the value of a cookie.
*
* @param String name The name of the cookie.
* @return The value of the cookie.
* @type String
*
* @name $.cookie
* @cat Plugins/Cookie
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*/
jQuery.cookie = function (name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};Frequently Asked Questions (FAQs) about jQuery Cookies
How can I set a cookie with jQuery?
Setting a cookie with jQuery is quite simple. You can use the jQuery cookie plugin to accomplish this. First, you need to include the jQuery cookie plugin in your HTML file. After that, you can use the following code to set a cookie:$.cookie('cookie_name', 'cookie_value');
In this code, ‘cookie_name’ is the name of the cookie you want to set, and ‘cookie_value’ is the value you want to assign to the cookie.
How can I read a cookie with jQuery?
Reading a cookie with jQuery is also straightforward. You can use the same jQuery cookie plugin to read a cookie. Here is the code you can use:$.cookie('cookie_name');
This code will return the value of the ‘cookie_name’ cookie. If the cookie does not exist, it will return undefined.
How can I delete a cookie with jQuery?
Deleting a cookie with jQuery is as simple as setting and reading a cookie. You can use the following code to delete a cookie:$.removeCookie('cookie_name');
This code will remove the ‘cookie_name’ cookie.
How can I set a cookie with an expiration date with jQuery?
You can set a cookie with an expiration date using the jQuery cookie plugin. Here is the code you can use:$.cookie('cookie_name', 'cookie_value', { expires: 7 });
This code will set a ‘cookie_name’ cookie with a ‘cookie_value’ value that will expire in 7 days.
How can I set a secure cookie with jQuery?
You can set a secure cookie with jQuery by using the ‘secure’ option in the jQuery cookie plugin. Here is the code you can use:$.cookie('cookie_name', 'cookie_value', { secure: true });
This code will set a ‘cookie_name’ cookie with a ‘cookie_value’ value that will only be transmitted over secure protocol as HTTPS.
How can I check if a cookie exists with jQuery?
You can check if a cookie exists with jQuery by reading the cookie and checking if it is not undefined. Here is the code you can use:if ($.cookie('cookie_name') !== undefined) {
// Cookie exists} else {
// Cookie does not exist}
How can I set a cookie for a specific path with jQuery?
You can set a cookie for a specific path by using the ‘path’ option in the jQuery cookie plugin. Here is the code you can use:$.cookie('cookie_name', 'cookie_value', { path: '/your_path' });
This code will set a ‘cookie_name’ cookie with a ‘cookie_value’ value for the ‘/your_path’ path.
How can I set a cookie for a specific domain with jQuery?
You can set a cookie for a specific domain by using the ‘domain’ option in the jQuery cookie plugin. Here is the code you can use:$.cookie('cookie_name', 'cookie_value', { domain: 'your_domain.com' });
This code will set a ‘cookie_name’ cookie with a ‘cookie_value’ value for the ‘your_domain.com’ domain.
How can I get all cookies with jQuery?
You can get all cookies with jQuery by using the following code:$.cookie();
This code will return an object containing all cookies.
How can I delete all cookies with jQuery?
Deleting all cookies with jQuery is not as straightforward as deleting a single cookie. You need to get all cookies first and then delete them one by one. Here is the code you can use:var cookies = $.cookie();for(var cookie in cookies) {
$.removeCookie(cookie);}
This code will delete all cookies.
Sam DeeringSam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.
