In order to delete cookies with JavaScript, we can set the expires date to a past date. We can also delete a cookie using the max-age attribute. We can delete the cookies explicitly from the browser.
Deleting cookies with JavaScript removes small bits of data that websites store on a user’s computer. Cookies are used to track a user’s browsing activity and preferences.
It is important to note that deleting cookies can have unintended consequences. For example, if you delete a cookie that is used to authenticate you to a website, you will be logged out of the website. You should only delete cookies if you are sure that you want to do so.
Different Ways to Delete the Cookies
There are three different ways to delete the cookies −
Set the past expiry date to the ‘expires’ attribute.
Use the ‘max-age’ attribute.
Delete cookies explicitly from the browser.
Delete Cookies using ‘expires’ Attribute
When you set the past expiry date as a value of the ‘expires’ attribute, the browser automatically deletes the cookie.
Syntax
Follow the syntax below to delete a cookie by setting up the past expiry date as a value of the ‘expires’ attribute.
document.cookie ="data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";
In the above syntax, we have set the past date as a value of the ‘expires’ attribute. You may set any past date.
Example
In the below code, you can click on the set cookies button to set cookies. After that, click on the get cookies button to observe the cookies.
Next, click the delete cookies button, and again get cookies to check whether the cookies are deleted.
Here, we delete the data1 cookie only.
<html><body><button onclick ="setCookies()"> Set Cookie </button><button onclick ="deleteCookies()"> Delete Cookie </button><button onclick="readCookies()"> Read Cookies </button><p id ="output"></p><script>let output = document.getElementById("output");functionsetCookies(){
document.cookie ="data1=test1;";
document.cookie ="data2=test2;";}functiondeleteCookies(){
document.cookie ="data1=test1;expires=Tue, 22 Aug 2023 12:00:00 UTC;";
document.cookie ="data2=test2;expires=Mon, 22 Aug 2050 12:00:00 UTC;";}functionreadCookies(){const allCookies = document.cookie.split("; ");
output.innerHTML ="The cookie is : <br>";for(const cookie of allCookies){const[key, value]= cookie.split("=");if(key =="data1"|| key =="data2"){
You can manually delete the cookies from the browser by following the steps below.
Step 1 − In your browser, click on the three verticle dots at the top right corner. After that, hover over the 'history, and it will open the menu. In the menu, click on the 'history.
Step 2 − Here, click on the 'clear browsing data' tab.
Step 3 − Check the cookies and other site data check boxes here. After that, click on the 'clear data' button.
However, the steps might differ based on what browser you are using.
This way, you can use any way among the three to clear your browser's cookie.
Leave a Reply