Understand the difference between cookie, session, localStorage, sessionStorage

Both cookies and sessions are session methods used to track the identity of browser users

1. The cookie data is saved on the browser, and the session data is saved on the server

2. The cookie can set the expiration time. If the expiration time is not set, the cookie will be stored in the memory, and the life cycle will end when the browser is closed; if the expiration time is set, the cookie will be saved in the hard disk. After closing the browser, the cookie data will still exist until the expiration time ends before disappearing.

The session is stored in the server, if you close the browser or stop the server, the session will be cleared.

3. The cookie stores strings, and the session can store any object

4. The size of cookie storage data generally does not exceed 4KB and the number of cookies stored by the browser is also limited (usually 20 cookies), and there is no storage limit for sessions

5. The cookie is not safe, it will be sent in every request, it is not used HTTPSand encrypted, the information stored in it is easy to be stolen, resulting in security risks, you should use session

6. The session will be saved on the server for a certain period of time. When the number of visits increases, it will occupy the performance of the server; reduce the performance of the server using cookies

localStorage features

1. Life cycle: persistent local storage, unless the data is actively deleted, the data will never be cleared (permanent)

2. Under the same browser, localstorage data is shared in all windows of the same origin (consistent protocol, domain name, port)

3. Storage data size: 5M

4. localStorageEssentially, it reads strings. If there is too much storage content, it will consume memory space and cause the page to become stuck.

5. Restricted by the same-origin policy

Disadvantages :

1. The expiration time cannot be set

2. Only strings can be stored, objects cannot be stored directly

Use of localStorage

//存储
localStorage.setItem('username','zhangsan');
//根据指定的key值获取存储的value
localStorage.getItem('username');
//删除指定的key的value
localStorage.removeItem('username');
//一次性清除所有存储
localStorage.clear()

sessionStorage features

1. Life cycle: only valid on the current page, once the page (browser) is closed, sessionStorage will delete the data and will not exist permanently

2. Storage data size: 5M

3. Page refresh will not delete data

4. sessionStorage is not shared in different browser windows, even on the same page

The use of sessionStorage is consistent with that of localStorage

// 保存数据
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

Common point : sessionStorage, localStorage, and cookies are all data stored on the browser side and have the same origin

difference :

Storage size: cookiethe data size cannot exceed 4KB , sessionStorageand localStoragealthough there is also a storage size limit, it is cookiemuch larger than that and can reach 5M
Data validity period: localStoragestore persistent data, and the data will not be lost after the browser is closed unless the data is actively deleted; the data is sessionStorageautomatically deleted after the current browser window is closed; it is valid until cookiethe set cookieexpiration time, even if the window or browser is closed
The way of interaction between data and server: cookiethe data will be automatically transmitted to the server, and the server can also cookiebe written to client; sessionStorageand localStoragethe data will not be automatically sent to the server, only saved locally
Different scope: sessionStoragenot shared in different browser windows, even on the same page; localstorageshared in all windows of the same origin; cookieshared in all windows of the same origin
Cookie data also has the concept of path, you can limit the cookie to only belong to a certain path by setting
webStorage (localStorage and sessionStorage) supports an event notification mechanism, which can send notifications of data updates to listeners

Benefits of using webstorage (localStorage and sessionStorage):

Reduce network traffic: use webstorage to save data locally, instead of like the same cookie, every time you transmit information, you need to send it cookie, reducing unnecessary data requests, and reducing data back and forth between the browser and server
Quickly display data: obtaining data locally is more efficient than obtaining data from the server through the network, so the web page display is also faster
Temporary storage: In many cases, the data only needs to be used when the user browses a set of pages, and the data can be discarded after closing the window, which is sessionStoragevery convenient to use
Server: Stored content is not sent to the server. It only exists locally and does not interact with the server in any way
Interface: More rich and easy-to-use interfaces, Web Storage provides a richer set of interfaces, making data operations easier
Storage space: Independent storage space, each domain has an independent storage space, each storage space is completely independent and will not cause data confusion