JavaScript Get Cookie By Name
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript get cookie by name, our today concept is same like previous tutorial concept with a minor difference that is we to get a single cookie by its name and not have to retrieve or get all cookies.
As, we know that cookies are used to store data inside user’s device or computer.
Step By Step Guide On JavaScript Get Cookie By Name :-
For example, at time of login we save the username, email id, etc. of user inside cookies.
And at dashboard we use that cookie to show user text like, Welcome username to our portal, etc.
Here, we did not retrieve all the data of cookie we get cookie by using the name in which we stored that cookie to access required data.
Now, let us understand how to retrieve a single cookie by its name in JavaScript.
document.cookie = "key1 = value1; key2 = value2; expires = date";
Above is the general syntax of get cookies using JavaScript that how to get cookies by name.
Below is the example of get cookies by name for better understanding.
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript Validation </title>
</head>
<body>
<h1>
Talkers Code – JavaScript Tutorials
</h1>
<h2>
JavaScript get cookie by name
</h2>
<button onclick="getCookies()"> Click Me </button>
<p id="result"> </p>
<script>
var result = document.getElementById("RESULT");
function cookieResult(cookieName) {
let cookie = {};
document.cookie.split(';').forEach(function(e) {
let [key,value] = e.split('=');
cookie[key.trim()] = value;
})
return cookie[cookieName];
}
function getCookies() {
result.innerHTML = cookieResult(“username”);
}
</script>
</body>
</html>
- Here, above we show you an example in JavaScript.
- 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.
- 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.
- 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.
- Here, as we see that inside html code, we create a button and paragraph. On click on this button the cookie values that are stored inside cookie name username will displayed on screen.
- Now, as we see inside our script tag, we see a function that calls on button click and this function calls another function as we see. Now, this function gets the cookies related to required name, split them stores the values inside an array. Then the array is used to retrieve required cookies.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to get cookies by name using JavaScript.
I hope this tutorial on JavaScript get cookie by name helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
