Cookies provide a way for a client and server to interact and pass information via HTTP. This enables the client to store state information despite using HTTP which is a stateless protocol. When a browser requests a web page from a server, the server services the request and “forgets” about the visit. But it passes some information to the user’s browser. The browser stores the information in the form of key=value pairs and also manages this information.
- Cookie information is passed in the HTTP request header during every subsequent visit to the domain from the user’s browser.
- Information like login details, consent, other preferences are used to enhance and customize the user experience.
HTTP cookies expire, the date and time are specified in the “expires” attribute. As a result, the browser automatically deletes the cookies when the date and time exceed the expiration date (and time). As this attribute is configurable*, it is possible to delete all the cookies by setting the “expiry” to any value that has already passed.
The cookie property of the current document is used to modify the attributes of the cookies buy using HTML DOM cookie Property. The document.cookie returns a single string of all the cookies separated by semicolons associated with the current document.
Syntax:
document.cookie = "key=value";
Code: The code below illustrates how cookies can be deleted using JavaScript. The code is run on an online editor to demonstrate that only cookies created by your site can be deleted by the code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Clear cookies using Javascript </title> </head> <body> <center> <h1 style="color:green"> neveropen </h1> <script type="text/javascript"> document.cookie = "1P_JAR=akjdsbJKHdjhbk"; document.cookie = "CONSENT=YES+IN.en+20170903-09-0"; function displayCookies() { var displayCookies = document.getElementById("display"); displayCookies.innerHTML = document.cookie; } function deleteCookies() { var allCookies = document.cookie.split(';'); // The "expire" attribute of every cookie is // Set to "Thu, 01 Jan 1970 00:00:00 GMT" for (var i = 0; i < allCookies.length; i++) document.cookie = allCookies[i] + "=;expires=" + new Date(0).toUTCString(); displayCookies.innerHTML = document.cookie; } </script> <button onclick="displayCookies()">Display Cookies</button> <button onclick="deleteCookies()">Delete Cookies</button> <p id="display"></p> </center> </body> </html> |
Output:
Note: If the attribute “HTTP” of a cookie is set to “True”, it is not possible to modify any of its attributes using JavaScript.
