How to Create Cookies using Js-Cookie

Creating cookies using the js-cookie library is a simple and easy process. Cookies are small pieces of data that are stored on a user’s browser and can be used to remember user preferences, login information, and other data. In this post, we will go over the steps required to create a cookie using the js-cookie library.

We are going to use js-cookie cdn, you can check out the js-cookie library as well. I will show you step by step process and then do some simple projects so that you can understand it properly. Let’s dive in!

Step 1: Import the js-cookie library

Before we can start creating cookies, we need to import the js-cookie library into our project. This can be done by adding the following line of code either to the head tag or before body tag of your HTML file.

<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>

Step 2: Set a cookie

Once the library is imported, we can start setting cookies. The syntax for creating a cookie using the js-cookie library is as follows:

Cookies.set('name', 'value');
// Let's say if we want to create a cookie called "btnAccepted" with a value of "true", we would use the following code:
Cookies.set('btnAccepted', 'true');

You can also pass additional options, such as the expiration date of the cookie. For example, if we want to set the cookie to expire in 7 days, we would use the following code:

Cookies.set('btnAccepted', 'true', { expires: 7 });

Step 3: Retrieving the cookie

Once you’ve set the cookie, you can easily retrieve it or get the value using the get() method. The syntax for retrieving a cookie is as follows:

Cookies.get('btnAccepted');
// For example, to get the value of the "btnAccepted" cookie, you would use the following code:
var getbtnValue = Cookies.get('btnAccepted');
console.log(getbtnValue);

Now we know how to set cookies and get the value, you can also explore more on the js cookie library GitHub repository there you will find how to remove cookie, set fallback, and many more. Let’s see some real-time examples using js-cookie library.

Set cookie only when onclick and hide the message

Let’s say we have a cookie banner and when the user clicks on the button called Accecp & Close the banner will close and won’t show up if the same user visits this page again. Let me show you what I mean.

Let’s see how we can do this! Right-click on your mouse inspect -> Application -> Cookies

We are going to use this code on our js file. Here I get the button using getbtn, after clicking on the button cookie banner will get hidden, set cookies and get the value. If the value true banner will be hidden.

var getbtn = document.querySelector('#cookie-btn');

    getbtn.addEventListener('click',function(){
        document.querySelector("#cookie-banner").style.display = 'none';

         //set cookie
            Cookies.set('btnAccepted', 'true');
                
        //get cookie
            Cookies.get('btnAccepted');
    })

    if( Cookies.get('btnAccepted') ){
        document.querySelector("#cookie-banner").style.display = 'none';
    }

You will find that the cookie value is true. If it’s true, banner will be hidden until the cookie gets removed. If you want to see visually how it works I recommend this youtube tutorial.

How to Create Cookies using js-cookie library on WordPress

The process is same, all you have to do is enqueue the library to your functions.php file.