Web jargon! It’s hard to keep up at times. The worst is when terms that are supposedly simple are thrown around, and you just sit there at the meeting like this. Doctor Who like whaaaat? Web cookies is definitely one of those terms. The purpose of this post is to explain web cookies in a simple manner. We will focus on the core concept, so that you can later apply this in any project, regardless of which or library you may choose. At the end of this post you should be able to differentiate between an actual cookie and a web cookie pretty confidently ;) framework Cookies?!? What do you mean A web cookie is a small bit of text that is sent to your browser by a server. A cookies purpose is to carry bits of useful information about your interaction with the website that sets them. The browser may store it and send it back with the next request to the same server. This way, the server can distinguish whether two requests came from the same browser. Cookies are specific to a web browser. Therefore, if you use a different computer, open a different browser or delete your cookies, the website will treat you as if you have arrived for the first time (and a new cookie will be set). What are cookies used for? Cookies can be used for a variety of reasons: Like whether you read the oldest or newest comments first; the volume on the video player, how long you hovered over a specific post, your shopping carts state, game scores and more. Remember your settings on a website. 2. For example, to tell what the most popular news story of the day is. Evilness! To understand how you and other users are using the site. Or to tell how badly you want an airline ticket. 3. like logging in to a service or to make sure you’re logged in securely (these cookies may contain information such as your email address and your name — the information you gave when you signed up. The website you signed up to is the only site that can access this information.) Authentication services Cookies in Practice Let’s start seeing things in action by setting our first cookie and examining it in the browser. It’s important to note that the Chrome browser won’t store cookies set from local web pages. Therefore we’ll set up a simple node server that will allow us to work under the localhost domain. To get this working locally clone the repo from this github repo, and run npm install. Then navigate to project directory and run Call it maaagic Simple Express Server Great! Now that we have our local dev environment setup and we can start playing with cookies. Let’s work towards something that resembles a real life scenario. Say we want to create a site that upon a users first visit prompts him/her for his name. When the user enters his name, we’d like to save it (via a web cookie), so that on the user’s next visit we can give them a warm welcome :) Here’s the basic markup we’ll be using for this experiment: Let’s start off with setting and getting a cookie in it’s most basic form. Now let’s restart the server so we can see the new changes. Voila! Our snazzy alert message Viewing cookies via Chrome Developer tools So when we show our document’s cookies we get something almost exactly identical to what we set. What’s the subtle difference? See that semi colon between both key-value pairs? Hmm.. we didn’t explicitly set that. So this is an example of how the browser differentiates between different cookies. By adding a semi colon to it! Methods for fetching, setting and checking for cookies Alright, alright. So at this point we’ve seen that cookies are built right into the global document object. We can set them by passing a string key-value pair to document. cookie. We can view all of our current web pages cookies by accessing . Let’s try and build a more scalable approach to getting and setting cookies by creating some methods. document.cookie Javascript Like we saw in our mini example above, cookie are saved as a string and separated by semicolons. Therefore we are going to use some built in Javascript string methods to fetch our cookie. indexOf(str) substring(startIndex, endIndex) fetchCookie() Our first method will check our cookies for a cookie with the key and returns it if it exists. username getUserData() This method will check the browser for a cookie with a “username” key. If it exists we will welcome the user. Otherwise we will prompt him/her for their name. setCookie() Our setter method will accept 3 params. A key, a value, and an expiration date. All Together Now The Final result Wrapping up Cookies are a big part of web development and are something we use everyday as consumers. Hopefully knowing how this works on the development side gives a little more insight into the inner workings of some of your favorite websites. In case you want a big picture view, here is the . full code available on our GitHub account If you enjoyed this don’t forget to clap! 👏 👏 👏 Feel free to follow me on , or where I regularly post entrepreneurship and tech related content. Instagram LinkedIn Github This post was created using the amazing summarization tool Mindflow.ai! Sign up now to join the alpha release! This post was originally published on . We’re building a community of builders with an emphasis on teaching skills that help you get stuff doooone. Subscribe! CodingStartups Until next time ✌️
