Cookies
Cookies are small pieces of data stored on the user’s browser. They are used to remember information between page loads or visits, such as login status, preferences, or tracking data. JavaScript can create, read, and delete cookies via the document.cookie property.
Cookies are part of the Browser Object Model (BOM) and are accessible through the document object.
Setting a Cookie
You can create a cookie by assigning a string to document.cookie.
The format is:
cookieName=cookieValue; expires=date; path=path; domain=domain; secure
Example:
// Set a simple cookie
document.cookie = "username=Alice";
// Set a cookie with expiry date (1 day)
const date = new Date();
date.setTime(date.getTime() + (24*60*60*1000)); // 1 day in milliseconds
document.cookie = `username=Alice; expires=${date.toUTCString()}; path=/`;
Reading Cookies
All cookies accessible to the page are stored in document.cookie as a semicolon-separated string.
Example:
console.log(document.cookie);
// Output: "username=Alice; theme=dark"
To retrieve a specific cookie:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
return null;
}
console.log(getCookie("username")); // Output: Alice
Deleting a Cookie
To delete a cookie, set its expiration date to a past date.
Example:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
Practical Examples
Example 1 – Setting a Theme Cookie:
function setTheme(theme) {
const date = new Date();
date.setTime(date.getTime() + (30*24*60*60*1000)); // 30 days
document.cookie = `theme=${theme}; expires=${date.toUTCString()}; path=/`;
}
// Usage
setTheme("dark");
Example 2 – Checking a Cookie:
function checkTheme() {
const theme = getCookie("theme");
if (theme) {
document.body.className = theme;
} else {
document.body.className = "light";
}
}
checkTheme();
Example 3 – Deleting a Cookie on Logout:
function logout() {
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
alert("You have been logged out!");
}