Hi guys,
In this article, we will learn about HTTP cookies and how to use JavaScript to manage cookies effectively.
1. What are cookies?
An HTTP cookie is a piece of data that a server sends to a web browser. The web browser then stores the HTTP cookie on the user’s computer and sends it back to the same server in future requests.
HTTP cookies are also known as web cookies or browser cookies. And it is often called a cookie.
For example, the header of an HTTP response might look something like this:
1 2 3 4 5 | <span class="token constant">HTTP</span> <span class="token operator">/</span> <span class="token number">1.1</span> <span class="token number">200</span> <span class="token constant">OK</span> Content <span class="token operator">-</span> type <span class="token operator">:</span> text <span class="token operator">/</span> html Set <span class="token operator">-</span> Cookie <span class="token operator">:</span> username <span class="token operator">=</span> admin <span class="token operator">...</span> |
Consider the above example, the HTTP method will return us with the variable username and the value admin. The server encrypts both the name and the value when sending the cookie to the web browser.
The web browser stores this information and sends it back to the server via the HTTP Cookie header for the next request as follows:
1 2 3 4 | <span class="token constant">GET</span> <span class="token operator">/</span> index <span class="token punctuation">.</span> html <span class="token constant">HTTP</span> <span class="token operator">/</span> <span class="token number">1.1</span> Cookie <span class="token operator">:</span> username <span class="token operator">=</span> admin <span class="token operator">...</span> |
2. Why Cookies?
As we know HTTP request is just stateless , because when we send two HTTP requests sequentially to the server, there is no link between them. In other words, the server cannot tell if two requests are from the same web browser.
Therefore, Cookie is used to indicate whether two requests are coming from the same web browser .
In fact, cookies serve the following purposes:
- Session Management – cookies allow you to manage any information the server needs to remember. such as login information, shopping cart, etc.
- Personalization – cookies allow you to store user information, themes and settings specific to the user.
- Tracking – cookies help to record and analyze user behaviors in advertising.
3. Cookie details
A cookie consisting of the following information is stored in the web browser as a key-value (except for the secure flag)
| Information | Explain |
|---|---|
| Name | The unique name that identifies the cookie. Cookie names are not case sensitive. It means Username and username are the same cookies |
| Value | The string value of the cookie. It must be URL encoded. |
| Domain | Domain to confirm cookie is valid |
| Path | the path does not have the domain name to which the cookie will be sent to the server. For example, you can specify that cookies are only accessible from https://www.yourwebsite.com/dom . Thus at https://www.yourwebsite.com will not send cookie information. |
| Expiration | The interval indicates when the web browser will delete the cookie. The expiration date is set to a date in GMT format: “Wdy, DD-Mon-YYYY HH:MM:SS GMT”. The expiration date allows cookies to be stored in the user’s web browser even after the user closes the web browser. |
| Secure flag | If specified, the web browser only sends the cookie to the server via an SSL connection (https, not http) |
Names, values, domains, paths, deadlines, and security flags are separated by semicolons and spaces. Such as:
1 2 3 4 5 6 | <span class="token constant">HTTP</span> <span class="token operator">/</span> <span class="token number">1.1</span> <span class="token number">200</span> <span class="token constant">OK</span> Content <span class="token operator">-</span> type <span class="token operator">:</span> text <span class="token operator">/</span> html Set <span class="token operator">-</span> Cookie <span class="token operator">:</span> user <span class="token operator">=</span> john <span class="token punctuation">;</span> expire <span class="token operator">=</span> Tue <span class="token punctuation">,</span> <span class="token number">12</span> <span class="token operator">-</span> December <span class="token operator">-</span> <span class="token number">2030</span> <span class="token number">12</span> <span class="token operator">:</span> <span class="token number">10</span> <span class="token operator">:</span> <span class="token number">00</span> <span class="token constant">GMT</span> <span class="token punctuation">;</span> domain <span class="token operator">=</span> www <span class="token punctuation">.</span> yourwebsite <span class="token punctuation">.</span> com <span class="token punctuation">;</span> path <span class="token operator">=</span> <span class="token operator">/</span> dom <span class="token punctuation">;</span> secure <span class="token operator">...</span> |
Note that the secure flag is the only part that is not a key-value pair.
So basically in this article I learned about what Cookies are and why I use Cookies, I will summarize the main points as follows:
- A cookie is a piece of data that a server sends to a web browser. The web browser then stores the cookie in the user’s computer and sends the cookie back to the same server on subsequent requests.
- The server uses cookies to determine if two consecutive requests are coming from the same web browser.