What are HTTP cookies?

Open your wallet. See a cookie in there? I do.

Cookies are a way for a website to store information in your browser.

Cookies in my wallet?? 🤔

Yes, your ID is like a cookie! 🤯

The government (issuer) provides an ID (cookie) that you store in your wallet (web browser’s storage) and take with you everywhere you go (the world is your web browser/oyster).

Your ID can be used to board an airplane (request): the TSA agent will verify the validity of your ID to ensure it was provided by the government (issuer) and wasn’t forged or altered (authorization tokens are verified for validity/alteration as well). They’ll ensure you match the picture in the ID and that the name matches the ticket (authentication — “who you are”), if there are no issues you’ll be allowed (“authorization” — “what you can do”) to enter the boarding area.

Identification cards (cookies) are a powerful way for the government (issuer) to store and request citizens’ (users) information.

Authorization is just one example of how cookies can be used — they can store anything that can be converted to text.

Enough with the analogies… 🤦‍♀️

🥺 You didn’t like my analogy? Fine! Technical jargon incoming…

Cookies vs. localStorage

_localStorage_ is just another way to store data in the browser.

Cookies are automatically sent with every HTTP request (visiting a URL, submitting a form, etc.), whereas localStorage needs to be accessed manually using JavaScript (code). Cookies are used to send information to the server, whereas localStorage is for storing information that will only need to be used client-side (in the browser) and (typically) won’t be sent to the server (i.e. the high score for a game).

How are cookies used?

Cookies are commonly used for storing an authentication token (secret key required to authorize requests), tracking browsing history (commonly used by advertisers), or recording state (i.e. items added to your shopping cart).

How do I see my cookies?

You can review (and even alter) your cookies in the browser (for the current domain/website) by opening the “Developer Tools”, where you’ll see that they are simply a key/value pair of “strings” (text).

How cookies look in Chrome Developer Tools

Not so bad right? Cookies are simply a way to store information that needs to persist across http requests. 💡

Aren’t cookies evil?

The reason cookies sometimes get a bad rap is because of “third-party cookies”. Third-party cookies are embedded in ads across the web to track your browsing history, with the (noble 🤑) goal of providing targeted advertising.

Don’t hate on cookies…they’re an important part of what makes the internet so great. While they can be used to harvest data, they’re also used to give you a “memorable” user experience. Happy browsing. ✌️