DEV Community

loading...

A one-click cookie deleter

carlyraejepsenstan profile image CarlyRaeJepsenStan Updated on ・3 min read

Are you sick of clearing your cookies and getting logged out of literally everything? Use this code snippet instead!

javascript:(()=>{document.cookie.split(";").map(o=>o.split("=")).map(o=>o[0]).forEach(o=>document.cookie =`${o}=;max-age=-100`);})();
Enter fullscreen mode Exit fullscreen mode

Usage

  1. Visit a random site and add it as a bookmark.
  2. Control-click, right-click, tap with two fingers, whatever... click "edit" and paste the above code into the "Address" box. 2a. NOTE! Some browsers automatically strip the javascript: part from the beginning. Check to make sure that the bookmarklet address starts with javascript:. If it doesn't, this won't work.
  3. Visit some site (like Glitch) and click on the bookmarklet. Poof! No more cookies. (You might get logged out).

How does this work? Here's the un-minified, readable version:

javascript: (() => {        
document.cookie.split(";")
  .map(o => o.split("="))
  .map(o => o[0])
  .forEach(o => document.cookie = `${o}=;max-age=-100`);
})();
Enter fullscreen mode Exit fullscreen mode

How does each part work?

javascript:

This tells the browser that the link is a javascript script. Otherwise, you'll perform a search for "(()=>{....."

(() => {})()

These are very cool functions - they're Anonymous Self-Invoking Functions, or ASIFs.

  • () => {} The above is the most concise form of a function possible, using ES6 arrow syntax. Before ES6, functions were:
const functionName = function(parameters) {
//do something...
}
Enter fullscreen mode Exit fullscreen mode

With arrow functions, they became:

const functionName = (parameters) => {
//do something...
}
Enter fullscreen mode Exit fullscreen mode

Note the A in ASIF - "anonymous". Just like people with no names, functions with no names are anonymous functions. So, this is an anonymous arrow expression.

  • () (around function)
    The set of parentheses around the anonymous arrow function is called a "closure". As you can see in the article, the point of the closure is to avoid naming conflicts. This actually served me well - on sites like Google and Twitter, there were already variables called "a" and "b". 😂

  • () (end of function)
    How does a function call its friends? With parentheses!
    Ok, not a funny joke. You should remember how to use functions with names:

const functionName = (parameters) => {
//do something...
}

functionName(params)
Enter fullscreen mode Exit fullscreen mode

What happens if the function doesn't have a name and doesn't have parameters? That's right, it's just:

()
Enter fullscreen mode Exit fullscreen mode

Simplicity is beautiful.

document.cookie.split(";");

If you go the console on some random site and run document.cookie, you'll see cookie syntax looks like this:
"key=value; key2=value2; ...".
By using the String#split method, we return an array of all the individual keys and values, like ["key=value", "key2=value"]

.map(o => o.split("="))

Using the .map array iterator method, we go through and split apart each key and value pair into two different values.
This line then produces an array of arrays:

[
 ["key", 
   "value"
 ], 
 ["key2", 
  "value"
 ]
]
Enter fullscreen mode Exit fullscreen mode

.map(o => o[0])

Now, we need to get the cookie keys. (Trust me, there's an end to this!). Note that the key is the first position of each array element - we simply need to iterate through and grab that key, and then make a new array. Now c looks like ["key", "key2"].

1.forEach(o => document.cookie =${o}=;max-age=-100);`

Unlike the .map iterators which make new arrays, Array#forEach basically provides a compressed for... loop - it does something for each element. We're taking each array of the element (which is the key), setting it to nothing, and then making the max-age negative so the cookie expires immediately.

Thanks for reading! If you made it all the way to the end, a pat on the back and a free mask for you 🤿, and if you found any mistakes or have any thoughts, don't be afraid to comment!

Credits: Josh Wood for the tips on Twitter, and Javascript Minifier for cleaning up my code.

Discussion

pic
Editor guide