All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Get Cookie Value In JavaScript

Last Updated : Mar 11, 2024

Get Cookie Value In JavaScript

In this tutorial we will show you the solution of get cookie value in JavaScript, cookies are generally used to store values or data in user’s local computer.

Session and cookies are used for same task, but there is some difference between them which we discuss in next article.

In this article, we will understand about how to get cookie value in JavaScript. Let’s understand this first.

Step By Step Guide On Get Cookie Value In JavaScript :-

In JavaScript, we are create, read, update and delete cookie.

Here, get cookie value means we will read cookie data.

So, below is given code for read a cookie in JavaScript. Let us understand this first.

// A custom function to get cookies
    function getCookie(name) {
        var cookieData = document.cookie.split(";");
        for(var i = 0; i < cookieData.length; i++) {
            var singleCookie= cookieData[i].split("=");
            if(name == singleCookie[0].trim())
                return decodeURIComponent(singleCookie[1]);
            }
        }
        return null;
    }
  1. Here, above we show you an example in JavaScript.
  2. For this first of all we here create a basic structure of html. For this we use html, head, title and body with script tag. We hope you know about the basic structure of html and which html tag is used for which concept.
  3. Now, when we look inside body tag. Here, we see some headings tag and a script tag. Heading tag again is a concept of html, whereas script relates to JavaScript.
  4. JavaScript is written always inside script tag. Where script is a paired tag so it also has a closing tag. Now inside these script tag, we write our JavaScript code.
  5. Here, as we see that we create a code with help of which we are able to get cookie value in JavaScript and this is done only if there is already a cookie set or say created previously. Hence, this code display output when cookie is set in our webpage and cookie name must be entered in this function.
  6. Now, as we know document.cookie is used to get cookie data from browser. But it fetch all the data. So, we need to split that data using JavaScript split function and you can also see the above code to see how to fetch and split cookie data.
  7. Now, at next we have to display data one by one. So, we use for loop here and split the cookie name and its value using split () function. Here, our cookie name and its value got split.
  8. At next, just decode the cookie data using decodeURIComponent () function and returns our required cookie value. We can also make this creative using predefined text with cookie value.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we are able to understand how to get cookie value in JavaScript.

I hope this tutorial on get cookie value in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪