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'
})