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 show name/value pairs of cookies in a document with JavaScript?
We use the cookie property of the document object to show the name/value pairs of cookies in a document with JavaScript. The document object, part of the DOM, corresponds to the current web page that the browser has loaded. It contains all the information about the condition of the browser as well as the web page.
A server serves requests when a connection is set up and forgets everything about the user as soon as the connection is closed. This posed a nasty problem of bad user experience to the community. A cookie resolves this problem by storing small but important details about the user corresponding to each individual site. This way, whenever the user visits the site again the request is attached with the cookie as well to customize the user experience individually.
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.
'dark_mode=true'
Something so trivial like this, is a user preference and thus can be conveniently stored in a corresponding cookie file.
Using the document.cookie Property
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.
Syntax
var cookies = document.cookie;
The above line returns a list of name/value pairs and stores it in cookies variable.
Example 1: Basic Cookie Display
In the code snippet below, we retrieve all cookies and display them in the HTML body.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var val = document.cookie;
document.getElementById("result").innerHTML = "Name/Value pair of Cookies: " + val;
</script>
</body>
</html>
Parsing Individual Cookies
The returned list can be split based on the (;) character and can be iterated as a list.
var cookielist = document.cookie.split(';');
This returns an array of name=value strings and stores it in cookielist variable.
Example 2: Displaying Individual Cookies
In the below code snippet, we split the string returned by document.cookie and traverse it to access each cookie separately.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
var val = document.cookie;
var cookielist = val.split(';');
var text = "";
for(var i = 0; i < cookielist.length; i++){
text += cookielist[i] + "<br>";
}
document.getElementById("result").innerHTML = "Name/Value pair of Cookies: <br>" + text;
</script>
</body>
</html>
Creating Cookies with JavaScript
We can also create our own cookies using JavaScript.
document.cookie = "name=value";
This creates a new cookie with a name-value pair and stores it in the document.cookie property.
Example 3: Interactive Cookie Creation
In the below code snippet, we extract user input and create a corresponding cookie in the document object.
<!DOCTYPE html>
<html>
<body>
Add your own cookies!<br>
Enter a Key-value pair:
<input id="cookie" type="text" placeholder="name=value">
<br>
<button id="button" onclick="create()">
Create!
</button>
<br>
<p id="alert"></p>
Click below to show all cookies!
<button id="show" onclick="show()">
Show cookies!
</button>
<div id="result"></div>
<script>
var result = document.getElementById("result");
function create(){
var cookieObj = document.getElementById("cookie");
var value = cookieObj.value;
document.cookie = value;
document.getElementById("alert").innerHTML = "Cookie created!";
}
function show(){
var val = document.cookie;
result.innerHTML = "Name/Value pair of Cookies: " + val;
}
</script>
</body>
</html>
The "Create!" button triggers the create() JavaScript function which then creates a new cookie. The show button can then be used to see the newly added cookie to the webpage.
Key Points
-
document.cookiereturns all cookies as a single semicolon-separated string - Use
split(';')to parse individual cookies from the string - Each cookie follows the format
name=value - Creating cookies is done by assigning to
document.cookie
Conclusion
The document.cookie property provides a simple way to access and display all cookies associated with the current webpage. You can both read existing cookies and create new ones using this property for enhanced user experience.
925 Views
