This is the fifth day of my participation in the More text Challenge. For details, see more text Challenge
A Cookie is introduced
Since HTTP is a stateless protocol, it cannot save the state of each request. Therefore, you need to add cookies to the client to save the state of the client. Cookies are used for user identification and state management. (Such as the web common to remember the password)
security
In the Cookie transmission and management, to ensure the security of cookies, not to be stolen.
- Secure: Cookies are sent only for Secure HTTPS communication.
- HttpOnlyCookie cannot be accessed by Javascript scripts (
Prevent XSS from stealing Cookie information by cross-site scripting attacks). - SameSite ：
Prevent cross-site CORF forgery attacks- Strict: the browser completely forbids third-party requests to carry cookies.
- Lax: You can only carry cookies if the get method submits the form or if the A tag sends the GET request.
- None: By default, cookies are automatically attached to requests.
WebStorage is based on the HTML5 specification
HTML5 provides two new ways to store data on the client side: localStorage and sessionStorage, mounted under the Window object.
WebStorage is local storage and data is not transmitted by server request. Thus it can store large amounts of data without affecting the performance of the site.
The purpose of Web Storage is to overcome some limitations brought by cookies. When data needs to be strictly controlled on the client, it is not necessary to continuously send data back to the server. For example, the client needs to save some user behavior or data, or from the interface to get some data that will not be updated in a short time, we can use Web Storage to store.
localStorage:
The life cycle is permanent. LocalStorage storage data, even close the browser, will not let the data disappear, unless the initiative to delete the data. If you want to set the expiration time, encapsulate it yourself.
sessionStorage
The life cycle is browser dependent
- If you close the browser or page, sessionStorage will fail.
- Page refresh does not erase data;
- Only links opened on the current page can access the data in sessionStorage. You can access the data in sessionStorage by using Windows. Open and changing the localtion.href mode.
Conclusion:
| features | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| The lifetime of the data | Usually generated by the server, you can set the expiration time. If cookies are generated on the browser side, they are invalid after the browser is closed by default | Stored permanently unless cleared | This parameter is valid only for the current session and is cleared when the page or browser is closed |
| Storage data size | About 4 KB | As a general rule, be 5 MB | With localstroage |
| Communicates with the server | Each time, it is carried in the HTTP header and sent to the server. But using cookies to store too much data can cause performance problems | Saved only in the client (i.e., the browser) and not communicated to the server | With localstroage |