Cookies in JavaScript

Image for post
Image for post

In internet terms, a Cookie is a small text file that is saved on a user’s computer, in order to, allow an otherwise stateless (or memory-less) HTTP communication to pretend to have a state. In simpler terms, a cookie saved information about a website that you visit so that when you leave the website and come back it kind of “remembers” you. In this article I wanted to just do a simple run through of how to manipulate cookies with JavaScript. Cookies are saved in key=value pairs, so you might see a simplified example like…

username=joethecat99

…when a user logs into a website. So now that we have a better understanding of cookie basics, let’s look at how to use them.

Reading cookies with JavaScript is simple, as we need to do is use document.cookie (HINT: document.cookie is going to be your friend for this article), to grab the cookie. So if we do console.log(document.cookie), we should see something like this…

Image for post
Image for post

Wow, and that IS a lot of techno-babble. We can go ahead and clean it up a little bit by changing the formatting and splitting it into key = value pairs…

Image for post
Image for post

Here, we just used .split(‘;’) on our document.cookie to break it up a little bit, you could have also done…

let cookie = document.cookie;console.log(cookie.split(';'));

…If that’s more your thing. It’s still a lot of techno-babble, but at least now we can see the keys and values.

To create a cookie, all we have to do is use document.cookie and assign a key=value pair to it, as a string. So…

Image for post
Image for post

Running document.cookie = “username=joethecat99” inserts joethecat99 on the last line of our cookie! So what if we just wanted to search for an individual key, as opposed to getting all of that techno-babble? Well, we could do something like this…

function cookieSearch(key) {
let cookie = document.cookie,
result;
if (cookie.includes(`${key}=`)) {
result = `${key} = ${cookie.split(`${key}=`)[1].split(`;`)[0]}`;
} else {
result = `Key not found in cookie.`;
}

return result;
}

And now if we ran cookieSearch(“username”), we would get “username=joethecat99”.

Updating cookies, if about the same as writing new things to a cookie, all we do differently is define the key who’s value we want to change. Running…

document.cookie = "username=bobthedog01";

Will change our username value to be “bobthedog01”.

To delete a cookie, the basic idea is to give the cookie an expiration date, and set the date to sometime in the past, and then, in theory, since the cookie is expired it should be deleted. Now with modern browsers, it’s not always that simple. The easiest way to delete a cookie, is to go into your browser’s settings and find the option to delete cookies. Code speaking we’d be looking at something like this…

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

Again, this may or not work on your browser, and the path should be set to the cookie that you wish to delete, also, some browsers will not let you delete a cookie without a path.

That pretty much goes through CRUD for cookies, using JavaScript. Remember, that document.cookie, is your friend, as all of our CRUD actions revolve around it. Well, I hope that you found this helpful, and thanks for reading!

Image for post
Image for post

Computer Support Tech turned Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store