Working with Cookies in jQuery

Key Points

• jQuery.cookie, a jQuery plugin, simplifies the process of creating, reading and deleting cookies. It must be downloaded from the code base on GitHub and included in the page after the jQuery library.
The
• cookie() method is used to create and read cookies. Creating a cookie requires two parameters: name and value. The optional third parameter can be an object literal containing additional options, such as path, domain, expires, and secure. To read the cookie, only the name parameter is required.
• Removing cookies is done using the removeCookie() method. If the cookie is found, it will return true, otherwise it will return false. The same options used when creating cookies (such as path and domain) must be passed in to successfully delete the cookies.

Cookies are common technologies for clients to store data. My previous article "How to Handle Cookies in JavaScript" explains how to perform CRUD operations on cookies using native JavaScript. This article turns to jQuery and will guide you through the jquery.cookie plugin, which makes cookie handling simple. This article assumes that readers are familiar with the contents of the aforementioned articles, or at least have a basic understanding of cookies. Without further ado, let's start.

Installing jquery.cookie

First, you need to download jquery.cookie from the code base on GitHub. Once you have obtained the jquery.cookie.js file, just add it to your page (s). Note that as a jQuery plugin you must include it after the jQuery library. Your page should contain a section similar to the following code:

<code class="language-html">
</code>

Method

jquery.cookie uses the same method cookie() to create and read cookies, but the number of parameters is different. To create a cookie, you need to pass in two required parameters, name and value of the cookie. You can pass a third optional parameter, which is an object literal with some additional options. These options are path, domain, expires, and secure. It is worth noting that these options can be set locally when you call the cookie() method, or globally through the $.cookie.defaults object. The options set with the former take precedence over the options set with the latter. To understand how cookies are created, let's look at a few examples. The following example tracks the number of times a user visits a website:

<code class="language-javascript">$.cookie("visits", 10);</code>

This example stores the user's favorite cities and specifies the domain and path that the cookie can read and write to:

<code class="language-javascript">$.cookie("favourite-city", "London", {path: "/", domain: "jspro.com"});</code>

This example stores the user's name. This cookie expired at 11:00 am on October 29, 2013 and can only be sent via a secure connection.

<code class="language-javascript">$.cookie("name", "Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});</code>

Read Cookies

Reading cookies is very easy. You just need to pass in one parameter, namely the name of the cookie, and read it, as shown in the following example: Read the number of times a user visits the website:

<code class="language-javascript">console.debug($.cookie("visits")); // 打印 "10"</code>

Read the user's favorite city:

<code class="language-javascript">console.debug($.cookie("favourite-city")); // 打印 "London"</code>

Read user's name:

<code class="language-html">
</code>

Delete Cookies

Now you know how to create and read cookies. The last thing you need to know is how to delete a cookie using the removeCookie() method. Return true if the requested cookie is found, otherwise return false. Note that when you want to delete cookies, you need to pass in the same options, such as path and domain, otherwise the operation will fail. Now, let's look at several examples of the removeCookie() method. Delete cookies that store the number of visits to the site:

<code class="language-javascript">$.cookie("visits", 10);</code>

Delete cookies that store users like cities:

<code class="language-javascript">$.cookie("favourite-city", "London", {path: "/", domain: "jspro.com"});</code>

Next, we try to delete the cookie that stores the user's name. This example fails because the secure value is not specified.

<code class="language-javascript">$.cookie("name", "Aurelio", {expires: new Date(2013, 10, 29, 11, 00, 00), secure: true});</code>

Conclusion

This article shows you how to manage cookies using jquery.cookie (a jQuery plugin). It solves many problems by abstracting cookie implementation details into several simple and flexible methods. If you need further instructions or other examples, please refer to the official documentation. If you like to read this article, you will love Learnable; there you can learn the latest skills and techniques from the masters. Members can instantly access all SitePoint's e-books and interactive online courses, such as jQuery: From Newbie to Ninja: New Tips and Tips. Comments in this article have been closed. Have questions about jQuery? Why not ask questions on our forum? *

FAQs about jQuery Cookies (FAQ)

How to set cookies using jQuery?

Setting cookies with jQuery is very simple. You can use the $.cookie function to set cookies. Here is an example:

$.cookie('cookie_name', 'cookie_value');

In this example, 'cookie_name' is the name of the cookie and 'cookie_value' is the value to be stored in the cookie. This will create a cookie that expires at the end of the browser session. If you want to set a specific expiration date, you can add the option object as the third parameter:

$.cookie('cookie_name', 'cookie_value', { expires: 7 });

This will create a cookie that expires after 7 days.

How to read cookies using jQuery?

It is also very easy to read cookies using jQuery. You can use the $.cookie function again, but this time without using the second parameter. Here is an example:

var cookie_value = $.cookie('cookie_name');

In this example, 'cookie_name' is the name of the cookie to be read. This function will return the value of the cookie.

How to delete cookies using jQuery?

To use jQuery to delete cookies, you can use the $.removeCookie function. Here is an example:

$.removeCookie('cookie_name');

In this example, 'cookie_name' is the name of the cookie to be deleted. This will delete cookies from the browser.

(The subsequent FAQ answer is similar to the previous output. The duplicate content is omitted here to keep the answer concise.)

The above is the detailed content of Working with Cookies in jQuery. For more information, please follow other related articles on the PHP Chinese website!