A one-click cookie deleter
CarlyRaeJepsenStan
Posted on October 23, 2020
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`);})();
Usage
- Visit a random site and add it as a bookmark.
- 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 withjavascript:
. If it doesn't, this won't work. - 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`);
})();
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...
}
With arrow functions, they became:
const functionName = (parameters) => {
//do something...
}
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)
What happens if the function doesn't have a name and doesn't have parameters? That's right, it's just:
()
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"
]
]
.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.
Posted on October 23, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.