Browser_cookie_localStorage_sessionStorage

Browser Storage

• Cookies
• Web Storage APIs:
  • LocalStorage
  • SessionStorage
• IndexedDB

Cookie vs LocalStorage vs SessionStorage

• All of cookie, localStorage and sessionStorage are key-value storage mechanisms on the client side.
• They are only able to store values as strings.
• https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies

Cookie

• Usually limited to 4KB per domain
• Sent with every HTTP request
• Can be configured to persist across browser sessions by setting an expiration date
• Suitable for maintaining stateful information across multiple sessions
• Can be shared between different subdomains of the same origin
• RFC 2965
• Using Javascript
  • https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

// You can only set a single cookie at a time
// key-value pairs are set along with meta-data
document.cookie = "name=Oeschger; SameSite=None; Secure";
document.cookie = "favorite_food=tripe; SameSite=None; Secure";
 
// get all the cookies (without HttpOnly flag)
// The cookie metadata like `path`, `domain` and `expires`
// are not visible to site code (neither to JS nor to the server-side)
allCookies = document.cookie;
console.log(allCookies);
// name=Oeschger; favorite_food=tripe
 
// You can delete a cookie by updating its expiration time to past date
// and optionally setting its value as empty
// `Path` is important while setting and deleting cookie
// https://stackoverflow.com/questions/10593013/delete-cookie-by-name
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
allCookies = document.cookie;
console.log(allCookies);
// 

• Using HTTP Headers
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie
    • Browsers block frontend JavaScript code from accessing the Set-Cookie header, hence you cannot read the value of this header using JS
    • When a Fetch API or XMLHttpRequest API request uses CORS, browsers will ignore Set-Cookie headers present in the server’s response unless the request includes credentials
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie
  • https://stackoverflow.com/questions/20320549/how-can-you-delete-a-cookie-in-an-http-response
  • https://stackoverflow.com/questions/16305814/are-multiple-cookie-headers-allowed-in-an-http-request

# `Set-Cookie` header via response header
# used to send a cookie from the server to the user agent, so that the user agent can send it back to the server later
# Only one cookie can be set by `Set-Cookie` and you can send multiple headers
Set-Cookie: sid=14A52; max-age=3600
Set-Cookie: PHPSESSID=298zf09hf012fh2; max-age=3600
Set-Cookie: csrftoken=u32t4o3tb3gg43; max-age=3600
 
# Read and Send `Cookie` header in request
# cookie meta data attributes are not sent in the header
# The `Cookie` header is optional and may be omitted if, for example, the browser's privacy settings block cookies.
# Multiple cookies can be sent and you can only send single `Cookie` header
Cookie: sid=14A52; PHPSESSID=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43
 
# Delete cookie
Set-Cookie: token=deleted; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT

Cookie Attributes

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes
• Domain=<domain-value>
  • Defines the host to which the cookie will be sent
  • Only the current domain can be set as the value, or a domain of a higher order
  • If omitted, this attribute defaults to the host of the current document URL, not including subdomains
  • If a domain is specified, then subdomains are always included
• Expires=<date>
  • maximum lifetime of the cookie
• Max-Age=<number>
  •  number of seconds until the cookie expires.
  • Max-Age has precedence over Expires if both present
• Partitioned
• Path=<path-value>
  • path that must exist in the requested URL when sending cookie
  • /docs:
    • matches /docs, /docs/, /docs/Web/
    • does not match  /, /docsets, /fr/docs
• SameSite=<samesite-value>
  • Strict
    • If a request originates from a different domain or scheme (even with the same domain), no cookies will be sent
  • Lax
    • Default behavior
    • cookie is not sent on cross-site requests, such as on requests to load images or frames
    • cookie is sent when a user is navigating to the origin site from an external site
  • None
    • cookie is sent with both cross-site and same-site requests
    • The Secure attribute must also be set else error is thrown
• HttpOnly — Forbids JavaScript from accessing the cookie
• Secure — allow browser sending cookies in requests only if it is https (except in localhost domain)
• Best security practices:
  • Always use Secure and HttpOnly
  • Also use appropriate value for SameSite attribute

Session Cookie

• If Expires or Max-Age is unspecified, the cookie becomes a session cookie
• A session finishes when the client shuts down, after which the session cookie is removed

What happens if you opt out of cookies?

LocalStorage

• Can store up to 5MB per origin
• The data is persisted even if browser is closed
• Can be used for:
  • user preferences
  • cached data
  • application state

// set
localStorage.setItem('username', 'John Doe');
 
// read
const username = localStorage.getItem('username');
console.log(username); 
 
// delete
localStorage.removeItem('username');
const result = localStorage.getItem('username');
console.log(result); // null, since key does not exist

SessionStorage

• It is same as LocalStorage but it has ephemeral nature
• Can store up to 5MB per origin
• The data is only available for the duration of the browser session and also it survives page reloads as well

// set
sessionStorage.setItem('theme', 'dark');
 
// read
const theme = sessionStorage.getItem('theme');
console.log(theme);
 
// delete
sessionStorage.removeItem('theme');
const result = sessionStorage.getItem('theme');
console.log(result); // null, since key does not exist