Hi there. Today I wanna talk about a Cookie.
I know that very many developers are using a cookie but they are using set/get/delete a cookie with some package like js-cookie and they know about cookies a bit.
Set a Cookie
Start with what is cookies and why do you can want to use them.
Cookies are string which are stored in the browser and this is a part of HTTP protocol. Your browser sends cookies to a web server that does the web like personal space.
You can be working with cookies in JavaScript. You can call document.cookie in the console of a browser.
document.cookie is not variable or something else. This works like setter/getter. You can get cookies and write a cookie with this.
Write some cookie right now. You can do it in this browser's tab or any other tabs.
document.cookie = 'userName=Bill'
You see that cookie has a format like key=value. In fact, the cookie has options but I am going to talk about this next.
A cookie's value can be any string so that you should use encodeURIComponent. So you can use value with spaces and other symbols.
document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}'
The Cookie options
Let's talk about a cookie's options.
You can write an option with the cookie using ; separator like this
document.cookie = `${encodeURIComponent(key)}=${encodeURIComponent(value)}; keyOfOption1=value; keyOfOption2=value;'
path
The options about which pages of a website can get cookies. The path must be absolute. By defaults to the current setter path.
domain
The domain where your cookie will be available. If you set another domain name it is not working but you can set a cookie with a subdomain and do available a cookie for the subdomain of your website.
max-age or expires
max-age and expires are synonyms.
max-age is the time in seconds from this moment.
expires is the date when your cookie will be deleted.
If neither max-age nor expires specified it will be expire at the browser has closed.
secure
Cookie with this option will be available only on the website by HTTPS protocol.
httpOnly
Cookie with these options sets web server. You cannot work with a cookie with this option. You cannot get/set/delete the cookie.
samesite
The option has some values.
strict
The cookie with same site=strict never sent in the request if you came from another domain.
lax
This soft variable of strict value. If you use one of safe methods your cookies will be sent or if your request from head level (for example request from iframe will not be sent).
Delete cookie
You could guess that if you set max-age as negative value of set expires as a past date you will delete the cookie. That is true.
I hope that I help you know about cookies more in the post that you knew early.
Thank you for reading the post ☺️
Useful resource https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
Top comments (0)