# Cookies

Cookies have been available as Strings that get created and passed with HTTP Requests and Responses since the early days of the web. In the Requests and Responses, they are sent as a Header value.

Practically every request that the browser makes for any file will have the cookie header sent along with the request.

In the browser they are stored inside document.cookie. We will use document.cookie to both get and set the values of cookies.

The format of the cookie string is like this:

'key=value;path=/;domain=localhost;max-age=30000;secure;samesite';
1

Just like localStorage there is a key and a value. The value must be URL encoded, just like values you put in the queryString.

# Path

Be default, cookies apply to the root folder of your website. However we can add to this path value to restrict the cookies to a smaller part of our website.

# Domain

By default, the domain value will be the domain of the HTML file. However, we can restrict it further to a specific subdomain if we want.

# Max-Age

The max-age part of the cookie String will be the number of seconds that the cookie is to be considered valid.

# Secure

If the secure value exists it means the cookie can only be accessed or set over https.

# Same-site

If the same-site value exists then the cookie is only to be sent with requests for files that are going to the same domain as the original HTML file.

MDN Reference for document.cookie

# New CookieStore API

Not an official standard yet but hopefully soon. Available in Chrome as of version 87.

https://medium.com/nmc-techblog/introducing-the-async-cookie-store-api-89cbecf401f

Back to week main page

Last Updated: 11/14/2020, 5:55:31 PM