Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set named cookies in JavaScript?
To set named cookies in JavaScript, use document.cookie with the format name=value. Named cookies allow you to store multiple key-value pairs that can be retrieved later.
Basic Syntax
document.cookie = "cookieName=cookieValue; expires=date; path=/";
Example: Setting a Customer Name Cookie
<!DOCTYPE html>
<html>
<head>
<script>
function WriteCookie() {
if (document.myform.customer.value == "") {
alert("Enter some value!");
return;
}
// Get the customer name and encode it
var customerName = encodeURIComponent(document.myform.customer.value);
// Set the named cookie
document.cookie = "customerName=" + customerName + "; path=/";
// Display confirmation
document.getElementById("result").innerHTML = "Cookie set: customerName=" + customerName;
}
function ReadCookie() {
// Read the cookie value
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf("customerName=") == 0) {
var value = decodeURIComponent(cookie.substring("customerName=".length));
document.getElementById("result").innerHTML = "Cookie value: " + value;
return;
}
}
document.getElementById("result").innerHTML = "Cookie not found";
}
</script>
</head>
<body>
<form name="myform">
Enter name: <input type="text" name="customer"/>
<input type="button" value="Set Cookie" onclick="WriteCookie();"/>
<input type="button" value="Read Cookie" onclick="ReadCookie();"/>
</form>
</body>
</html>
Setting Multiple Named Cookies
<!DOCTYPE html>
<html>
<head>
<script>
function setMultipleCookies() {
// Set multiple named cookies
document.cookie = "username=JohnDoe; path=/";
document.cookie = "theme=dark; path=/";
document.cookie = "language=en; path=/";
document.getElementById("output").innerHTML = "Multiple cookies set successfully!";
}
function displayAllCookies() {
var allCookies = document.cookie;
document.getElementById("output").innerHTML = "All cookies: " + allCookies;
}
</script>
</head>
<body>
<button onclick="setMultipleCookies()">Set Multiple Cookies</button>
<button onclick="displayAllCookies()">Display All Cookies</button>
</body>
</html>
Cookie Options
| Option | Purpose | Example |
|---|---|---|
expires |
Set expiration date | expires=Wed, 31 Dec 2024 12:00:00 UTC |
path |
Specify URL path | path=/ |
domain |
Set domain scope | domain=.example.com |
Example with Expiration Date
<!DOCTYPE html>
<html>
<head>
<script>
function setCookieWithExpiry() {
// Set cookie that expires in 7 days
var expiryDate = new Date();
expiryDate.setTime(expiryDate.getTime() + (7 * 24 * 60 * 60 * 1000));
document.cookie = "sessionID=abc123; expires=" + expiryDate.toUTCString() + "; path=/";
document.getElementById("message").innerHTML = "Cookie set with 7-day expiry!";
}
</script>
</head>
<body>
<button onclick="setCookieWithExpiry()">Set Cookie with Expiry</button>
</body>
</html>
Key Points
? Use encodeURIComponent() to handle special characters in cookie values
? Always specify path=/ to make cookies available site-wide
? Multiple cookies are separated by semicolons in document.cookie
? Cookie names are case-sensitive
Conclusion
Named cookies in JavaScript use the document.cookie property with name=value format. Always encode values and consider setting expiration dates and paths for proper cookie management.
Updated on: 2026-03-15T23:18:59+05:30
644 Views
Advertisements