JavaScript cookies are small text files that are stored on a user's computer by a website. They are used to store information about the user's preferences, login information, and other data that can be used to enhance the user's experience on the website. Cookies are an essential part of modern web development, and they are used by almost every website on the internet.
When a user visits a website, the website can send a cookie to the user's browser. The cookie is stored on the user's computer and can be accessed by the website the next time the user visits. Cookies can be used to store information about the user's preferences, such as their language preference or their login information. They can also be used to track the user's activity on the website, such as which pages they visit and how long they stay on each page.
JavaScript cookies are created using the document.cookie
property. This property allows developers to set, get, and delete cookies. Cookies are stored as key-value pairs, and each cookie has an expiration date. When a cookie expires, it is automatically deleted from the user's computer.
To create a cookie, you can use the following code:
<script>
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
</script>
This code creates a cookie named "username" with the value "John Doe". The cookie will expire on December 18, 2022, and it will be accessible from any page on the website.
To read a cookie, you can use the following code:
<script>
var username = getCookie("username");
if (username != "") {
alert("Welcome back, " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return "";
}
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
</script>
This code reads the "username" cookie and displays a welcome message if the cookie exists. If the cookie does not exist, it prompts the user to enter their name and creates a new cookie with the user's name. The cookie will expire after 365 days.
To delete a cookie, you can set its expiration date to a date in the past. For example:
<script>
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
</script>
This code deletes the "username" cookie by setting its expiration date to January 1, 1970.
JavaScript cookies are an essential part of modern web development. They allow websites to store information about the user's preferences, login information, and other data that can be used to enhance the user's experience on the website. Cookies are created using the document.cookie
property, and they are stored as key-value pairs with an expiration date. Cookies can be read and deleted using JavaScript code.