Introduction and usage of jquery. cookie. js

  • 2021-07-18 06:51:16
  • OfStack

What is cookie?

cookie is a page that holds information, such as logging in automatically, remembering user names, and so on.

Characteristics of cookie

All pages in the same website share 1 set of cookie cookie is limited in quantity and size cookie has expiration jquery. cookie. js is a lightweight cookie plug-in that reads, writes, and deletes cookie. This paper mainly aims at

The usage of jquery. cookie. js is described in detail.

How to use jquery. cookie. js


Definition: Let the website server store a small amount of data to the client's hard disk or memory, and read data from the client's hard disk;

Download and import: jquery. cookie. js is based on jquery;; Introduce jquery first, and then introduce jquery. cookie. js;


< script type="text/javascript" src="js/jquery.min.js" > < /script >
< script type="text/javascript" src="js/jquery.cookie.js" > < /script >


1. Add 1 "Session cookie"

$.cookie('the_cookie', 'the_value');

The valid time of cookie is not specified here, and the created cookie is valid until the user closes the browser by default, so it is called "Session cookie (session cookie)".

2. Create an cookie and set the valid time to 7 days

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

The effective time of cookie is specified here, and the created cookie is called "persistent cookie (persistent cookie)". Note that the unit is: days;

3. Create an cookie and set a valid path to cookie

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

By default, the cookie can only be read from the Web page where the cookie is set. If you want one page to read the cookie set by another page, you must set the path of cookie. The path to cookie is used to set the top-level directory where cookie can be read. By setting this path to the root directory of the website, all web pages can read cookie from each other (1. Do not set this path to prevent conflicts).

4. Read cookie


5. Delete cookie

$. cookie ('the_cookie', null); //Just pass null as the value of cookie

6. Optional parameters


expires: (NumberDate) expiry date; When 1 integer is set, the unit is days; You can also set a date object as the expiration date of Cookie;
path: (String) Create the page path of the Cookie;
domain: (String) Create the page domain name of the Cookie;
secure: (Booblean) If it is set to true, the transmission of this Cookie will require a security protocol, such as HTTPS;


Setting cookie:

$.cookie('the_cookie', 'the_value');

Note: If $.cookie Without the third parameter, the cookie will be automatically deleted when the browser is closed.

Set up an cookie valid for 7 days:

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

Note: $.cookie The third parameter is an object, except that the validity period can be set ( expires: 7 ), you can also set a valid path ( path: '/' ), the valid domain ( domain: '' ) and Security ( secure: true ).

Read cookie:


Note: If there is no cookie, null is returned.

Delete cookie:

$.cookie('the_cookie', null);

We can delete the cookie simply by setting the cookie to null.

Finally, the source code is attached:

 * Cookie plugin
 * Copyright (c) 2006 Klaus Hartl (
 * Dual licensed under the MIT and GPL licenses:

 * 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: '', 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/

 * 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/
jQuery.cookie = function(name, value, options) {
 if (typeof value != 'undefined') { // name and value given, set cookie
 options = options || {};
 if (value === null) {
  value = '';
  options = $.extend({}, options); // clone object since it's unexpected behavior if the expired property were changed
  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
 // NOTE 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 = ? '; 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));
 return cookieValue;


The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.

Related articles: