JS Cookies

JS Cookies - Cookies in JavaScript

HTTP is a stateless protocol used to communicate between web browsers and servers. However, maintaining session information across several pages is necessary for a business website. One user's registration, for example, comes to a conclusion when several pages have been completed. But how can you keep track of a user's session throughout all of your web pages?

Cookies are the most efficient means of remembering and monitoring preferences, purchases, commissions, and other information needed for a better visitor experience or site statistics in many scenarios.

98 Cookies are tiny text files that save information on your computer.

When a web server sends a web page to a browser, the connection is terminated, and the server loses all information about the user.

Cookies were designed to address the issue of "remembering user data":

A cookie can be used to store a user's name when they visit a website.

The cookie "remembers" the user's name the next time he or she visits the website.

Name-value pairs are used to store cookies, such as:

Tanmay Upadhyay's username is Tanmay Upadhyay.

Cookies from the page are added to the request when a browser requests a web page from a server. This gives the server the information to "remember" information about users.

If your browser does not allow local cookies, none of the examples below will function.

Create a Cookie with JavaScript

The document.cookie property in JavaScript allows you to create, read, and remove cookies.

A cookie may be made in JavaScript like this:

"username=Tanmay Upadhyay" in document.cookie;

You may also provide an expiration date (in UTC). When the browser is closed, the cookie is erased by default:

document.cookie = "username=Tanmay Upadhyay; expires=Thu, 18 Dec 2013 12:00:00 UTC"; document.cookie = "username=Tanmay Upadhyay; expires=Thu, 18 Dec 2013 12:00:00 UTC"

You may inform the browser what route the cookie belongs to by using the path option. The cookie is associated with the current page by default.

"username=Tanmay Upadhyay; expires=Thu, 18 Dec 2013 12:00:00 UTC;
path=/" document.cookie = "username=Tanmay Upadhyay; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/"

Example :

<!DOCTYPE html> <html lang="en-US"> <head> <script> function setCookie(cname,cvalue,exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires=" + d.toGMTString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for(let i = 0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie() { let user = getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user != "" && user != null) { setCookie("username", user, 30); } } } </script> </head> <body onload="checkCookie()"></body> </html>

OUTPUT:

1.reload the page and enter your name
2.reload page again