Before the words

Cookie D. Mix together butter, all-purpose flour and egg mixture and refrigerate for 30 minutes. Roll out to any shape and place in a 180C oven for about 20 minutes. Well, that’s all for today’s article.

Is this what fans want to see? I’m afraid you don’t want your year-end bonus. (Great Boss)

Give me another chance. Look at this. (Humble Editor)

What is a Cookie?

To understand what a Cookie is, I think you need to know what problem he or she solved. Set the clock back to 2000. With the continuous popularization of the Internet, users are no longer satisfied with unilateral browsing of web pages. More complex, richer web content and interactions are needed by users. At this point, the retention of user status (user tracking) became the biggest technical barrier of the day.

User tracking refers to recording what a user does on a web page. Such as user login, goods added to shopping cart, etc.

Given the breadth of technology available today, there are many ways to track users. Cookie (I am the protagonist of today), Session, WebStorage (LocalStorage, SessionStorage) and so on. But in the technological environment at the time, all this was blank. WebStorage was first mentioned in W3C in 2009.

After discussions organized by the Internet Engineering Task Force (IETF), it was decided to define two different approaches to the user tracking problem. One is saved in a client (browser, etc.) way, namely Cookie. The other is saved on the server side, called a Session. Although the Session is stored on the server side, it still needs the help of the SessionId to determine the user state corresponding to each request, and the SessionId is often stored in cookies. This round-the-world solution is actually more secure than cookies (cookies must be cracked in order to steal session ids). But it also puts pressure on server storage, and even requires additional synchronization processes for unified management in clustered applications. As a result, it has rarely been used in the current technological environment. Cookie’s simple and rich Api, server zero storage, ignoring clustering and other advantages make it active until now.

So, anyway, what is a Cookie?

A Cookie is a regular string stored in a browser document object. It consists of a series of key-value pairs. To solve the problem of HTTP request statelessness, cookies are automatically added to the request header at each HTTP request. This allows the server to read cookies to determine the state of the client.

Format: < cookie – name > = < value > cookies -;

=

Example: uid = 013 b6070c74eb20428e6be; code=xqCFUY7_r8EVc8XToEiSE5MXs7-mus4eT7qBFXTJXZI

How to operate cookies

I believe that fans already know what cookies are, so how to operate. Listen to xiaobian

Lu Xun said: look at its shape and then learn to add, delete and change, half of the work is twice the success. There are many ways to view cookies, xiaobian is introduced to the big ones by paragraph.

All of the following browser window examples are based on Microsoft Edge 86.0.622.38

Gold grade

1. Open the official website: www.zhuanzhuan.com

2. Click the small lock symbol in the upper left corner to see cookies (xx in use). Here are 18.

3. Click the Cookie bar to view details

Platinum Dan

1. Open the official website: www.zhuanzhuan.com


2. Right click to open the menu, click Check or type Ctrl + Shift + I to open the developer tools.


3. View cookies in developer tools

Diamond grade

1, open the developer tools console, enter document.cookie to view.


Star yao Dan

1, Open the system folder (Windows C:\Users\[yourUserName]\AppData\Local\Microsoft\Edge\User Data\Default)


2, use SQLite database management tool to open, do not install SQLite can use https://sqliteonline.com website experience under oh.


Dan king

Xiaobian do not know the black technology also please fans greatly in the comment area to share oh, I wish you on the king of the season. 【 Pitiful face 】

Now that you can see its shape, so add, delete and change is actually very simple. All of the viewing methods described previously have interface interactions to operate on. As a responsible editor, how could you be so hasty?

Operating a Cookie

The server side

Add the set-cookie option in the response header. The browser automatically saves the Cookie after receiving the response header.

Format: set-cookie: < Cookie name >=< Cookie value >

Example:

The browser

Small make up of a set of suitable for ES6 Cookie operation method, address (blog.csdn.net/fsferg/arti…). .

See MDN document.cookie (developer.mozilla.org/zh-CN/docs/…) .

Not xiaobian don’t want to say, space is limited, space is limited. [Sly face]

Cookie application instance

Compared with Session, cookies are more suitable for business scenarios and more convenient to use. Each big Internet enterprise has high intensity to its dependence.

After a user logs in, a unique token is used to indicate that the user has logged in. In this way, the user can determine whether the login has expired or set the login validity period.

It can also be used to temporarily save information such as the user’s shopping cart. The following small series through an example of jingdong shopping cart to illustrate.

1. Open the official website of Suning: www.suning.com


2. Search for any product. Here is huawei Matebook X. You can see that the list of items and the number of carts is 0.



3. Select any item to enter the details and add to the shopping cart. You can see that my shopping cart has increased to 1.


4. Open the developer tool, look at the cookie, find totalProdQty and find that the value is 1


5. Right-click to open the menu, click edit “Value”, change its value to 5, and refresh the page. The cart is already 5



6, mouse into the shopping cart to open the details, the number automatically refresh back to 1. This is a very good suning. Cookie values are not fully trusted.


Advantages and disadvantages of Cookies

advantages

  • BOMRich APIS make it highly extensible
  • Storage in the browser side, reducing the server storage stress
  • Following the same Origin policy, you can set domain names and paths to isolate data
  • Can be transmitted over SSL, reducing the possibility of the request being hacked
  • You can set the Cookie expiration time to prevent resource waste and data expiration caused by cookies being permanently retained on the browser

disadvantages

  • Each request carries cookies, which wastes bandwidth resources
  • Although the transmission process is secure, data can be easily modified through the browser. It is not recommended to use cookies or encrypt sensitive data
  • Cookies can only store string data, not media data
  • Different browsers have different size limits for cookies, usually around 4KB, so cookies can only store short content
  • Users can manually turn off cookies, which makes them less stable to store

Ok, this period to share here, like big people can click like oh, hey hey. More importantly, if you want to know more about the front-end technology, please feel free to leave a comment in the comments section. We’ll take them all into consideration.