Differences between sessionstorage, localstorage, and cookie

Sessionstorage and localstorage are provided by the HTML5 web storage API to conveniently store data between Web requests. With local data, you can avoid unnecessary data transmission between the browser and the server.
Sessionstorage, localstorage, and cookie are all data stored on the browser. The concept of sessionstorage is very special and introduces the concept of "browser window. Sessionstorage is the data that always exists in the same window (or tab) of the same source. That is to say, as long as the browser window is not closed, even if the page is refreshed or another page is accessed from the same source, the data still exists. When the window is closed, sessionstorage is destroyed. At the same time, the sessionstorage objects are different for different windows opened separately, even on the same page.
Benefits of Web storage: reduces network traffic: once the data is stored locally, you can avoid sending data requests to the server, thus reducing unnecessary data requests, reduces the amount of data transmitted between the browser and the server. Quick data display: the performance is good. Reading data locally is much faster than obtaining data from the server over the network, and local data can be obtained instantly. In addition, the webpage itself can also be cached. Therefore, if the entire page and data are both local, they can be immediately displayed. Temporary Storage: in many cases, data is only used when users browse a group of pages. When the window is closed, the data can be discarded. In this case, sessionstorage is very convenient.

The difference between browser local storage and server-side storage is that data can be stored both locally in the browser and on the server.
The browser can save some data and obtain it from the local machine when necessary. sessionstorage, localstorage, and cookie are all stored locally by the browser.
The server can also store all user data, but the browser needs to request data from the server when necessary. 1. The server can store users' persistent data, such as databases and cloud storage, to save a large amount of user data on the server. 2. The server can also save the user's temporary session data. The server-side session mechanism, such as the JSP Session object, stores data on the server. In implementation, the server and the browser only need to pass the session ID. The server finds the session object of the corresponding user based on the session ID. The session data is valid only for a period of time. This time is the session validity period set by the server.
The server saves all user data, so the server overhead is large, while the browser saves the data distribution required by different users in their respective browsers. Browsers are generally used to store small data, while servers can store big data or small data. The server stores data securely. Browsers are only suitable for storing general data.

Differences between sessionstorage, localstorage, and cookie
In common: both are stored on the browser side and are in the same source. Difference: cookie data is always carried in the same source HTTP Request (even if not required), that is, the cookie is transmitted back and forth between the browser and the server. Sessionstorage and localstorage do not automatically send data to the server and only save the data locally. Cookie data also has the concept of path, which can restrict the cookie to only belong to a specific path. The storage size limit is also different. The cookie data cannot exceed 4 kb. Because each HTTP request carries a cookie, the cookie is only suitable for storing small data, such as session IDs. Although sessionstorage and localstorage have limits on the storage size, they are much larger than cookies and can reach 5 MB or larger. Sessionstorage: Valid only before the current browser window is closed. It is naturally impossible to maintain persistence. localstorage: always valid. Windows or browsers are always saved and used as persistent data; the cookie is valid only until the specified cookie expires, even if the window or browser is closed. With different scopes, sessionstorage is not shared in different browser windows, even on the same page. localstorage is shared in all same-source windows, and cookies are shared in all same-source windows. Web storage supports the event notification mechanism to send notifications of data updates to listeners. The Web storage API is more convenient to use.

Differences between sessionstorage, localstorage, and cookie