Cookies are small pieces of data stored by a web browser on the user's computer. They are used to store information temporarily or permanently so that websites can remember users and their preferences.
Cookies are stored in text files and are maintained by the browser.
Examples of information stored in cookies:
- User login information
- Username
- Theme preference (Dark/Light mode)
- Language settings
- Shopping cart items
- Session identifiers
A Cookie is a small text-based data stored in the browser that allows websites to remember information about the user across different pages and visits.
JavaScript provides the following property to work with cookies:
document.cookieCookies are used to:
- Store login sessions.
- Remember user preferences.
- Store shopping cart information.
- Save language settings.
- Track user activity.
- Personalize websites.
- Maintain session information.
Syntax:
document.cookie = "name=value";Example:
document.cookie = "username=Sachin";This creates a cookie named:
username
with value:
Sachin
Syntax:
document.cookieExample:
console.log(document.cookie);Output:
username=Sachin
You can update a cookie by assigning a new value.
Example:
document.cookie = "username=Virat";Now the cookie value becomes:
username=Virat
Cookies are deleted by setting their expiry date to a past date.
Example:
document.cookie =
"username=Sachin; expires=Thu, 01 Jan 1970 00:00:00 UTC;";This removes the cookie.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cookies in JavaScript</title>
</head>
<body>
<button onclick="getCookie()">
Get Cookie
</button>
<script>
function setCookie(){
document.cookie =
"message=Nice to meet December Batch Students, All the Very Best !!!";
}
function getCookie(){
setCookie();
if(document.cookie.length==0){
alert("No cookie found");
}
else{
alert("Cookie is set in browser");
}
}
</script>
</body>
</html><!DOCTYPE html>Declares HTML5 document.
<html>Root element of webpage.
<button onclick="getCookie()">Creates a button.
When the button is clicked:
getCookie()will execute.
function setCookie()Creates a function to store cookie.
document.cookie =
"message=Nice to meet December Batch Students";Creates a cookie named:
message
with value:
Nice to meet December Batch Students
document.cookie.lengthChecks whether cookie exists.
if(document.cookie.length==0)If no cookie exists:
No cookie found
will be displayed.
elseIf cookie exists:
Cookie is set in browser
will be displayed.
After clicking button:
Cookie is set in browser
If cookies are disabled:
No cookie found
Syntax:
document.cookie =
"name=value; expires=date";Example:
document.cookie =
"user=Sachin; expires=Fri, 31 Dec 2027 12:00:00 UTC";The cookie remains stored until the specified expiry date.
Syntax:
document.cookie =
"name=value; path=/";Example:
document.cookie =
"user=Sachin; path=/";This cookie becomes accessible throughout the website.
A session cookie is deleted automatically when the browser closes.
Example:
document.cookie =
"sessionId=12345";No expiry date is specified.
A persistent cookie remains even after the browser is closed.
Example:
document.cookie =
"user=Sachin; expires=Fri, 31 Dec 2027 12:00:00 UTC";Common cookie attributes:
| Property | Description |
|---|---|
| expires | Expiration date of cookie |
| max-age | Lifetime in seconds |
| path | Path where cookie is valid |
| domain | Domain name |
| secure | Sent only over HTTPS |
| SameSite | Restricts cross-site access |
document.cookie =
"user=Sachin;
expires=Fri, 31 Dec 2027 12:00:00 UTC;
path=/;
secure";| Session Cookie | Persistent Cookie |
|---|---|
| Temporary | Permanent |
| Deleted after browser closes | Remains until expiry |
| No expires attribute | Has expires attribute |
| Used for login sessions | Used for preferences |
- Stores user preferences.
- Maintains user sessions.
- Easy to implement.
- Improves user experience.
- Allows personalization.
- Limited storage size (~4KB).
- User can disable cookies.
- Security risks if not encrypted.
- Sent with every HTTP request.
- Not suitable for large data.
Answer:
Cookies are small text files stored in the browser to save user-related information.
Answer:
document.cookieAnswer:
Cookies are stored as text files in the browser.
Answer:
document.cookie="username=Sachin";Answer:
console.log(document.cookie);Answer:
Set expiry date to a past date.
document.cookie=
"user=Sachin;
expires=Thu, 01 Jan 1970 00:00:00 UTC";Answer:
Session cookie is deleted when browser closes.
Persistent cookie remains until expiry date.
Answer:
Approximately:
4 KB
- Cookies store small pieces of data.
- Cookies are stored as text files.
- JavaScript uses
document.cookie. - Cookies maintain sessions.
- Cookies can have expiry dates.
- Cookies improve user experience.
- Cookies have storage limitations.
- Cookies are sent with HTTP requests.
Cookies in JavaScript are small text-based data stored in the browser to preserve user information across multiple requests and sessions. Using the document.cookie property, developers can create, read, update, and delete cookies. Cookies are widely used for session management, storing user preferences, authentication, and personalization of websites, making them an essential part of modern web development.