How to read write and delete cookies in jQuery?

Last Updated : 06 Aug, 2024

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:

pulamolusaimohan

Improve

Article Tags :

How to read write and delete cookies in jQuery?

Similar Reads

Thank You!

What kind of Experience do you want to share?