Open In App

How to read write and delete cookies in jQuery?

Last Updated : 06 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will learn how to read, write and delete cookies in jQuery. This can be done using the cookie() and removeCookie() methods of the jquery-cookie library. We will first understand what exactly is a cookie.

Cookie: Cookies are small blocks of data created by a web server when a user is using a website and cookies are stored on the user's device. These cookies remember certain information about the user.

1. Creating or writing a cookie: We use the cookie() method to create cookies.

Syntax:

$.cookie('name', 'value', { settings });

Parameters: This method has two parameters.

  • name: This is the key of the cookie
  • value: This is the value of the cookie.
  • settings: This is an object that can be used to set additional parameters to the Cookie.

2. Reading a cookie: We can use the cookie() method to read a cookie by passing the name of the cookie and it will return the value of the cookie.

Syntax:

$.cookie('name');

Parameters: It has a single parameter, which is the name of the cookie to be read.

Return Value: It returns the value of the cookie.

3. Removing a cookie: We can use the removeCookie() method to read a cookie by passing the name of the cookie. It Returns true when a cookie was successfully deleted, otherwise, it returns false.

Syntax:

$.removeCookie('name');

Parameters: It has a single parameter, which is the name of the cookie.

Return Value: It Returns true when a cookie was successfully deleted, otherwise, it returns false.

The below example demonstrates all of the above methods.

Example:

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </script>
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
    </script>
</head>

<body>
    <form class="form-inline mt-4">
        <input type="text" class="form-control mx-2" 
               id="cookieData"
               placeholder="Enter something for cookie">
        <button id="write" type="button"
                class="btn btn-secondary mx-2">
          Write / Add cookie
        </button>
        <button id="read" type="button" 
                class="btn btn-secondary mx-2">
          Read /Show cookie
        </button>
        <button id="delete" type="button"
                class="btn btn-secondary mx-2">
          Remove cookie
        </button>
    </form>
    <script type="text/javascript">
        $(function () {
            $("#write").click(function () {
                $.cookie("data", $("#cookieData").val());
            });
            $("#read").click(function () {
                alert($.cookie("data"));

            });
            $("#delete").click(function () {
                $.removeCookie("data")
            });
        });
    </script>
</body>

</html>

Output:

Example 2: Creating a cookie with expiry time in days. The approach is similar to the above example, We just need to pass an additional expiry value while creating the cookie.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <script src=
"https://code.jquery.com/jquery-2.1.3.js">
    </script>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">
    </script>
</head>
<style>
    button {
        display: block !important;
        margin: 10px;
    }
</style>

<body>
    <form class="form-inline mt-4">
        <input type="text" class="form-control mx-2"
               id="cookieData" placeholder="Enter Data">
        <input type="text" class="form-control mx-2"
               id="cookieExpiry" placeholder="Enter Expiry">
    </form>
    <button id="write" type="button"
            class="btn btn-primary mx-2">
        Write / Add cookie
    </button>
    <button id="read" type="button" 
            class="btn btn-primary mx-2">
        Read /Show cookie
    </button>
    <button id="delete" type="button"
            class="btn btn-primary mx-2">
        Remove cookie
    </button>
    <script type="text/javascript">
        $(function () {
            $("#write").click(function () {

                // Write the cookie and set its expiry value
                $.cookie("expiry", $("#cookieExpiry").val(),
                         { expires: $.cookie("expiry") });
                $.cookie("data", $("#cookieData").val());
            });
            $("#read").click(function () {
                alert($.cookie("data") + 
                      "\n expires in days = " +
                      $.cookie("expiry"));

            });
            $("#delete").click(function () {
                $.removeCookie("data")
                $.removeCookie("expiry")
            });
        });
    </script>
</body>

</html>

Output:


Next Article
Getting Started with jQuery

P
pulamolusaimohan
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox