jQuery Cookie Plugin

jQuery can manipulate Cookies through the jquery.cookie.js plugin.

Official Address: http://plugins.jquery.com/cookie/

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

Before using jquery.cookie.js, jQuery needs to be included first:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.cookie.js"></script>

We can also include these two files using a third-party resource library:

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Usage

Create a cookie:

$.cookie('name', 'value');

If no expiration time is specified, it will expire when the browser is closed.

Create a cookie and set it to expire in 7 days:

$.cookie('name', 'value', { expires: 7 });

Create a cookie and set the effective path of the cookie, the path being the root directory of the website:

$.cookie('name', 'value', { expires: 7, path: '/' });

Note: By default, only the page that sets the cookie can read it. If you want a page to read a cookie set by another page, you must set the cookie's path. The cookie's path is used to set the top-level directory that can read the cookie. Setting this path to the root directory of the website allows all pages to read each other's cookies (generally not recommended to prevent conflicts).

Read a cookie:

$.cookie('name'); // => "value"
$.cookie('nothing'); // => undefined

Read all cookie information:

$.cookie(); // => { "name": "value" }

Delete a cookie:

// Returns true if the cookie is deleted successfully, otherwise returns false
$.removeCookie('name'); // => true
$.removeCookie('nothing'); // => false

// When writing with a path, the same attributes (path, domain) are needed for reading
$.cookie('name', 'value', { path: '/' });

// The following code will fail to delete
$.removeCookie('name'); // => false
// The following code will successfully delete
$.removeCookie('name', { path: '/' }); // => true

Attention: When deleting a cookie, you must pass the exact same path, domain, and security options used to set the cookie.

Example

$(document).ready(function(){
  $.cookie('name', 'tutorialpro');  // Create a cookie
  name = $.cookie('name');     // Read a cookie
  $("#test").text(name);
  $.cookie('name2', 'tutorialpro2', { expires: 7, path: '/' });
  name2 = $.cookie('name2');
  $("#test2").text(name2);
});

After execution, we can view the Cookie information in the browser as shown below:

Parameter Explanation

raw

Default value: false.

By default, reading and writing cookies are automatically encoded and decoded (using encodeURIComponent and decodeURIComponent). To turn off this feature, set raw: true:

$.cookie.raw = true;

json

Store and retrieve cookie data using JSON, eliminating the need for JSON.stringify and JSON.parse.

$.cookie.json = true;

expires

expires: 365

Defines the validity period of the cookie. The value can be a number (from the creation of the cookie, in days) or a Date object. If omitted, the created cookie is a session cookie and will be deleted when the user exits the browser.

path

path: '/'

Default: Only the page that sets the cookie can read it.

Defines the valid path of the cookie. By default, this parameter's value is the path of the page that created the cookie (standard browser behavior).

If you want to access this cookie throughout the website, set the valid path like this: path: '/'. If you want to delete a cookie that has a defined valid path, you need to include this path when calling the function:

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

domain

domain: 'example.com'

Default value: The domain of the page that created the cookie.

secure

secure: true

Default value: false. If true, the cookie's transmission requires a secure protocol (HTTPS).

❮ Misc Size Ajax Getjson ❯