HTTP Cookies

What are they?

  • Stored on the client side
  • Sent on each request based on domain name
  • Can be created by the client or the server
  • localstorage and sessionstorage are better suited when there's no need to send data to the server

What are they used for?

  • Personalization
    • Saving user preferences
  • Sessions
    • login
    • shopping cart
  • Tracking - ie. google analytics

Anatomy of a cookie

  • Name=Value
  • Expiration
  • Path - limiting when the cookie is sent

Client side

Using javascript you can create, update and delete a cookie

// creating a cookie
document.cookie = "username=jeff; expires=Thu, 01 Jan 2020 00:00:00 UTC; path=/;"

// deleting a cookie (setting expiration in the past)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

DEMO

Server side

Sending a Set-Cookie header in the response will create a cookie on the client side

Set-Cookie: <cookie-name>=<cookie-value> 
Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date>
Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit>
Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>
Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value>

DEMO

fetch

fetch will not send cookies by default.

add credentials: same-origin to send

fetch('https://example.com', {
  credentials: 'same-origin'  
})

HTTP Cookies

By Netcraft

HTTP Cookies

  • 650