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
How to use JavaScript to set cookies for a specific page only?
We can set cookies for a specific page only using JavaScript. We use the path attribute of the document.cookie property to set the cookie on a specific webpage. Cookies are small text files (4 KB) that store important information such as username, email, session id, and other preferences that help customize the webpage for a particular user.
The pathname property of the Window location returns a string containing the path of the current webpage. The path is basic information about where the current webpage is stored on the server.
document.cookie Syntax
The document.cookie property returns a list of name/value pairs separated by semicolons. It stores information about the cookies related to the current webpage. We can set cookies by providing name/value pair with the path attribute to specify which page the cookie belongs to.
document.cookie = "name=value; path=/specific/page";
Where the path parameter defines the specific page or directory where the cookie should be available.
Setting Cookie for Current Page
In this example, we create a cookie that is only available on the current page by using the current pathname.
<html>
<head>
</head>
<body>
Set cookie on a specific page!
<form name="myform">
Enter name: <input type="text" name="customer" />
<input type="button" value="Set Cookie" onclick="WriteCookie();" />
</form>
<div id="result"></div>
<script>
function WriteCookie() {
// User input validation
if (document.myform.customer.value == "") {
document.getElementById("result").innerHTML = "Enter some value!";
return;
}
var cookievalue = encodeURIComponent(document.myform.customer.value);
var myPath = window.location.pathname; // Get current page path
// Set cookie for current page only
document.cookie = "name=" + cookievalue + "; path=" + myPath;
document.getElementById("result").innerHTML = "Cookie set for current page: " + myPath;
}
</script>
</body>
</html>
Creating Cookie with Manual Path
This example shows how to create a cookie and specify exactly which path it should be available on.
<!DOCTYPE html>
<html>
<body>
<p>Enter a Name-value pair:</p>
<input id="cookie" type="text" placeholder="name=value">
<br><br>
<p>Enter specific path (optional):</p>
<input id="path" type="text" placeholder="/specific/page" value="/">
<br><br>
<button onclick="create()">Create Cookie</button>
<button onclick="show()">Show Cookies</button>
<p id="alert"></p>
<div id="result"></div>
<script>
function create() {
var cookieInput = document.getElementById("cookie");
var pathInput = document.getElementById("path");
if (cookieInput.value.length == 0) {
alert("Please enter name-value pair");
return;
}
var cookiePath = pathInput.value || "/";
document.cookie = cookieInput.value + "; path=" + cookiePath;
document.getElementById("alert").innerHTML = "Cookie created for path: " + cookiePath;
}
function show() {
var cookies = document.cookie;
document.getElementById("result").innerHTML = "Available cookies: " + (cookies || "No cookies found");
}
</script>
</body>
</html>
Path Attribute Behavior
| Path Value | Cookie Available On | Example |
|---|---|---|
/ |
All pages of the website | Site-wide cookie |
/products |
Only /products and its subdirectories | /products, /products/shoes |
/products/shoes.html |
Only the specific page | Just /products/shoes.html |
Key Points
- Use
encodeURIComponent()to properly encode cookie values - The path attribute determines where the cookie is accessible
- Cookies with
HttpOnlyflag are not accessible via JavaScript - Use
window.location.pathnameto get the current page path - More specific paths create more restricted cookies
Conclusion
Setting cookies for specific pages using the path attribute provides better control over cookie scope and enhances security by limiting where sensitive data can be accessed. Always encode cookie values and choose appropriate paths based on your application's needs.
3K+ Views
