The following comparisons are made from three aspects:
1. Capacity: cookie is only 4KB, localStorage and sessionStorage have a maximum capacity of 5M
2. Whether it will be carried into ajax: cookie is carried with every http request, which will affect the efficiency of obtaining resources. LocalStorage and sessionStorage can be carried or not.
3. API ease of use: cookies need to be encapsulated to be used, localStorage and sessionStorage are simple and easy to use
cookie
It is used for client and server communication but it has the function of local storage, so it is "borrowed"
Disadvantages of cookies for storage
Storage is too small, only 4KB
All http requests are carried, which will affect the efficiency of obtaining resources
API needs to be encapsulated to use document.cookie = ... For details, please refer to other links:
https://www.cnblogs.com/kaixin3946/p/6042014.html
localStorage和sessionStorage
HTML5 is specially designed for storage, with a maximum capacity of 5M (take it when you don't need it, can take it or not)
Simple and easy to use API
localStorage.setItem(key,value)
localStorage.getItem(key)
Difference between localStorage and sessionStorage
The latter is cleared as long as the browser is closed, and the former is always stored locally unless manually cleared
Notice:
ios safari hidden mode (privacy mode)
localStorage and sessionStroage will report an error
It is recommended to use the try-catch package uniformly