1.sessionStorage (temporary storage)
sessionStorage is one of the new Web Storage APIs in HTML5. It is used to store key-value pair data in the browser. It is similar to localStorage, but the data stored in sessionStorage will be cleared when the session ends.
sessionStorage can be used in the following ways:
Storing data:
sessionStorage.setItem('key', 'value');
retrieve data:
sessionStorage.getItem('key');
delete data:
sessionStorage.removeItem('key');
Clear all data:
sessionStorage.clear();
It should be noted that sessionStorage can only store string type data, if you need to store other types of data, you need to convert it to string type first.
Two. localStorage (permanent storage)
localStorage is one of the new Web Storage APIs in HTML5. It is used to store key-value pair data in the browser. It is similar to sessionStorage, but the data stored in localStorage will not be cleared when the session ends.
localStorage can be used in the following ways:
Storing data:
localStorage.setItem('key', 'value');
retrieve data:
localStorage.getItem('key');
delete data:
localStorage.removeItem('key');
Clear all data:
localStorage.clear();
It should be noted that localStorage can only store string type data, if you need to store other types of data, you need to convert it to string type first.
Three. cookie
A cookie is a mechanism for storing data on the client side, which can be read and set through document.cookie.
The main purposes of cookies are as follows:
Session management: Cookies can be used to manage the user's session state, such as saving the user's login state.
Personalized settings: Cookies can be used to save the user's personalized settings, such as the user's language preference, theme preference, etc.
Tracking user behavior: Cookies can be used to track user behavior, such as recording user browsing history, purchase records, etc.
It should be noted that the size limit of cookies is relatively small, generally only a few KB of data can be stored, and the storage method of cookies is relatively simple and easy to be tampered with, so it is not suitable for storing sensitive information. If you need to store sensitive information, it is recommended to use localStorage or sessionStorage
the difference:
The life cycle of stored data is different: the data stored in sessionStorage will be cleared when the session ends, while the data stored in localStorage will not be cleared when the session ends.
The scope of storing data is different: the data stored in sessionStorage is only valid in the current session, while the data stored in localStorage is shared among all windows of the same source.
The size limit of stored data is different: the size limit of sessionStorage and localStorage is different. Generally speaking, the size limit of localStorage is larger than that of sessionStorage.