What are the cookies?
A cookie is a short data file that a web server stores on the client’s machine in programming. Cookies are transmitted back to the server with each request made by the client’s browser and are used to remember details about a user, such as their preferences or login information. This enables the server to save state and give the user a customized experience. They may be accessed and changed using JavaScript or other computer languages, and are usually saved as key-value pairs.
What do JavaScript cookies do?
Consider the following scenario: Suppose we have a website or webpage where we want to store user data (signup or login information) so that when a user returns to the same page, the server recognizes them and renders the user data on the page as necessary. Therefore, cookies include user information.
Make a cookie:
Creating a cookie is a rather simple operation in JavaScript. To generate a cookie with the user’s information, we write the next line. For instance, we want to keep track of the username of the person who is presently signed in.
document.cookie = “username = David Warner;”
The line above generates a cookie with the name specified as the username, but we should additionally include an expiration date, i.e., when the cookie should be erased. If we don’t specify an expiration date, the cookie is deleted when the browser is closed. For instance, when a user signs out, we want the cookie associated with that user to be removed.
It is also possible to include the following information when creating the cookie:
document.cookie = “user = Adam Wayne; expires = Fri, 18 Dec 2023 23:00:00 UTC;”
You might also erase it after closing the browser.
A cookie has to have one extra characteristic, called path, specified when it is created.
If not supplied, defaults to the current path of the current document location. path=path (e.g., “/” or “/mydir”)
Path = “/” is provided because I want cookies to be accessible from everywhere on my website.
Erase the cookie:
In the previous section, we made the cookie for a year. In the click event listener of the logout button or whatever HTML element you are using for logout, we will now put the following code if we wish to erase the cookie when the user logs out:
document.cookie = "user= ; expires = Sat, 07 Feb 1986 00:00:00 GMT;path=/";
In the code above, the cookie’s name, user, is empty, its expiration date is set to the past, and the cookie is erased.
Grab a cookie:
Write document.write to obtain the current cookie. The code I used to create, fetch, and delete cookies in one of my projects is shown below:
function createCookie(userKey,r_token){
let separator = ";" ;
document.cookie = "user_name=" + userKey + ";expires = Thu, 17 Nov 2022 23:00:00 UTC;path=/";
document.cookie = "renew_token = " + r_token + ";expires = Thu, 17 Nov 2022 23:00:00 UTC;path=/"
}
I intended to save two values in the cookie in the code above, so either I can use the method above to generate two cookies independently with two distinct values, or I can use the following code:
function createCookie(userKey,r_token){
let separator = ";" ;
let values = [userKey,r_token].join(separator);
document.cookie = "myValues="+values+";expires = Thu, 17 Nov 2022 23:00:00 UTC;"
}
Cookie removal upon logout:
document.getElementById("logoutBtn").addEventListener("click",function(){
document.cookie = "user_name= ; expires = Sat, 10 Feb 1980 00:00:00 GMT;path=/";
document.cookie = "renew_token= ; expires = Fri, 09 Feb 1980 00:00:00 GMT;path=/"
})
I wish this article had been around when cookies first became popular.
