Vue front-end interview summary (10) detailed explanation of sessionStorage localStorage cookie

The difference between sessionStorage localStorage cookie

1. Life cycle

Cookie: You can set the expiration time. The default is to expire after closing the browser.
SessionStorage: Only valid under the current web session, and will be cleared after closing the page or browser.
LocalStorage: Save forever unless manually cleared

2. Storage data size:

Cookie: about 4KB
localStorage and sessionStorage: can save 5MB of information.

http request:

Cookie: It will be carried in the HTTP header every time. If you use cookie to save too much data, it will cause performance problems.
LocalStorage and sessionStorage: Only save in the client (ie browser), not participate in the communication with the server.

Ease of use:

Cookie: need to be encapsulated by the programmer, the original Cookie interface is not friendly
localStorage and sessionStorage: the original interface can be accepted, and it can also be encapsulated again to have better support for Object and Array

Application scenarios:

Cookie: It is often used to identify user logins. It cannot be cross-domain and has many restrictions. It will waste bandwidth.
SessionStorage: It is commonly used to save some temporary data to prevent users from losing some parameters after refreshing the page.
localStorage: can be used to pass parameters across pages

Guess you like

Origin blog.csdn.net/Rick_and_mode/article/details/108614689