How To Set Cookie In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to set cookie in JavaScript, cookie we already know it is data stored in small text files, on our computer and those data only available till chrome window get closed.
Here we created and set as cookie on the browser for a particular limit of day and time so it will available until it reach defined time and date.
So we can use those data for any purpose incase when we need.
Step By Step Guide On How To Set Cookie In JavaScript :-
Here we defined one variable ‘username’ with value initialization and we defined function ‘setcookie’ for sets date and time of expiry.
This function defined with parameters ‘cookie_name,cookie_value,expiry_date’ and within function we created date object for sets date, time after that we finally sets cookie by using ‘document.cookie’ object service.
The document property cookie lets you read and write cookies associated with the document.
<!DOCTYPE html>
<html>
<head>
<title>Set Cookie</title>
</head>
<body>
<script>
let username='MaxBrown';
function setcookie(cname,cvalue,expdate){
let date=new Date();
date.setTime(date.getTime()+(expdate*24*60*60*1000));
const expires="expires="+date.toUTCString();
document.cookie=cname+"="+cvalue+";"+expires+";path=/";
}
setcookie('username',username,30);
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In <script> tag we defined variable ‘username’ with value ‘MaxBrown’ after that setcookie() function defined with parameters ‘cname,cvalue,expdate’ and within function we created date object and stored to variable ‘date’.
- Then setTime() method used to sets expiry date and ‘getTime()’ function used to sets expiry time. Both method using to calculate expiry date with defined date and appends to date object.
- After that ‘toUTCString()’ method used to change date format to UTC string format then finally we sets cookie on the browser with passed values.
- Finally we defined function call setcookie() with passed parameters ‘’username’,’MaxBrown’,30’.
- In browser for open javascript console use the shortcut ‘ctrl+shift+j’ then console panel will open at right hand side there we can see our cookie.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to set cookie in javascript.
When we execute our program on browser we need to confirm one thing is our program should be hosted on internet then we have to use shortcut ‘ctrl+shift+j’.
So console panel will open with our defined cookie ‘username:MaxBrown’ it will available till date 30th current time of when we defined.
We can also set or get cookie value at console panel because we had access of write or read any script code on console panel and we will see about them in future.
I hope this tutorial on how to set cookie in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
