JS-storage
1 knowledge points
1.1 cookie
The cookie itself is used for client and server communication. But it has the function of local storage, so it is "borrowed". Use document.cookie =… to get and modify.
Features: The amount of storage is too small, only 4KB
is carried with all http requests, which will affect the efficiency of obtaining resources. The
API is complicated, and it needs to be encapsulated to use document.cookie =…
1.2 sessionStorage 和 localStorage
HTML5 is specially designed for storage, with a maximum capacity of 5M.
API is simple and easy to use:
localStorage.setItem(key, value);
localStorage.getItem(key)
Both locationStorage and sessionStorage can store content locally in the browser,
but locationStorage is used in more scenarios.
Because after the content is stored, as long as it is not deleted, the content is always there.
With sessionStorage, the browser is closed, and the content is deleted as soon as the background ends.
In iOS safari hidden mode, localStorage.getItem will report an error, it is recommended to agree to use try-catch package
2 Q&A
Subject: Please describe the difference between cookie, sessionStorage and localStorage?
① Data lifetime
/ expiration time can be set, the default is to expire after closing the browser
/ unless it is manually cleared, it will be permanently saved
/ closed after the web page or browser is cleared
② Capacity
(4KB vs 5M)
③ Communicate with the server
/ It will be carried in the HTTP header every time
/ only saved in the client, not participating in the communication with the server
④ API ease of use
/ to be packaged by yourself, the source interface is not friendly
/ the source interface is friendly and convenient