The cookies are the text or data stored in the format of text files in the browser or user’s computer, and it is one kind of cache memory.
The developer can store the username, authentication tokens, etc., in the browser’s cookies. When a user visits the webpage for the first time, it retrieves the user information from the server and stores it in the cookie format in the browser. After that, when a user visits the webpage again, it retrieves the required data from cookies instead of the server, making the application fast and secure.
Every browser has a limit on storing cookies. The most modern browsers allow users to store cookies of the maximum size of 4kb. However, the different browser allows to store of a different number of cookies. Google chrome allows 180, and Firefox allows 150, etc.
Clear all Cookies using JavaScript
This section will look at how we can clear all cookies using JavaScript. Every cookie contains the expiry attribute, which contains the expiry date and time for the particular cookies. We can retrieve all cookies and set the past expiry date to clear all cookies.
Syntax
Users can follow the syntax below to set the past expiry date to all cookies.
// retrieve all cookies
var Cookies = document.cookie.split(';');
// set past expiry to all cookies
for (var i = 0; i < Cookies.length; i++) {
document.cookie = Cookies[i] + "=; expires="+ new Date(0).toUTCString();
}Algorithm
Users can follow the algorithm below to clear all cookies.
- Step 1 − Get all cookies using document.cookies.
- Step 2 − Split the all cookies with delimiter ‘;’, and it returns the array of cookies.
- Step 3 − Iterate through every cookies and set value of ‘expires’ attribute to the past expiry date.
Example
In the example below, we have created two button names, ‘show cookies’ and ‘clear cookies.’ When a user clicks on any of them, it will call the respective function to display cookies or erase cookies. We will set the object in the cookies when the webpage loads.
<html>
<head>
</head>
<body>
<h2>Clear all cookies using JavaScript</h2>
<h4>Click on the below buttons to show and clear cookies.</h4>
<button onclick = "showCookies()">show Cookies</button>
<button onclick = "deleteCookies()">clear Cookies</button>
<div id = "show"></div>
<script type ="text/javascript">
// function to show cookies
function showCookies() {
var show = document.getElementById("show");
show.innerHTML = document.cookie;
}
// function to delete cookies
function deleteCookies() {
var Cookies = document.cookie.split(';');
// set 1 Jan, 1970 expiry for every cookies
for (var i = 0; i < Cookies.length; i++)
document.cookie = Cookies[i] + "=;expires=" + new Date(0).toUTCString();
showCookies();
}
// set object in the cookies on webpage load.
window.onload = () => {
let object = { name: "FirstEnquiry", site: "firstenquiry.com", }
document.cookie = 'object=' + JSON.stringify(object);
}
</script>
</body>
</html>In the above output, users can see the object at last in the cookies when they click on the Show cookies button. When a user clicks on the clear cookies button, it will remove objects from the cookies. Here, we have cleared all cookies which we set up.
