Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 customise 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 helps customise 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 (;). 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.
Let’s look at an example to understand better.
Example 1
In the code snippet below, we extract the hostname and log it in the body of HTML.
<!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>
The returned list can be split based on the (;) character and can be iterated as a list.
var cookielist = document.cookie.split(';')
This returns a list of name=value string and stores it in cookielist variable.
Let’s look at an example to understand better.
Example 2
In the below code snippet, we split the string returned by document.cookie and traverse it to access each cookie.
<!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>" } result.innerHTML = "Name/ Value pair of Cookies: <br>" + text ; </script> </body> </html>
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.
Let’s look at an example to understand better.
Example 3
In the below code snippet, we extract the 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">{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.
Conclusion
A cookie is an innovative trick to enhance the user experience by storing small pieces of details about the user. However, they are also used in many malicious attacks and thus should be handled with care.
582 Views
