Skip to content
Related Articles

Related Articles

How to read write and delete cookies in jQuery ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 11 Mar, 2022

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=
    </script>
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script type="text/javascript" src=
    </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=
    </script>
    <link rel="stylesheet" href=
    <script type="text/javascript" src=
    </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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!