Similarities and differences between cookies, localStorage, and sessionStorage
I haven't had much contact with front-end caching before. After consulting my front-end colleague, he pasted a few lines of code for me to use localStorage to access information. Later, when the boss reviewed the code, he found that he was approved. Now take a good look at these front-ends The difference between cache and remember history. . .
1.Cookie
Size: around 4k
Life cycle: generally generated on the server, you can set the expiration time, if generated on the browser side, closing the browser will invalidate
Purpose: Due to the size limitation, it can be used to save the user's login information, such as whether to save the password after logging in. This is used for this purpose.
2.localStorage
Size: about 5MB
Lifecycle: cleared after closing the page or browser
Purpose: For example, H5 games will generate a lot of local data
3.sessionStorage
Size: about 5MB
Life cycle: if not cleared manually, it will exist forever
Purpose: When there are many fields in the single-line process page, using sessionStorage can reduce the number of ajax requests, and the page data will be loaded quickly
4. Operate sessionStorage and localStorage (both have the same operation method)
| sessionStorage/localStorage.length | Get the number in storage |
| sessionStorage/localStorage.key(n) | Get the key value of the nth element pair in the storage (the first element is 0) |
| sessionStorage/localStorage.getItem(key) | Get the value corresponding to the key value key |
| sessionStorage/localStorage.key | Get the value corresponding to the key value key |
| sessionStorage/localStorage.setItem(key, value) | Add data, the key value is key, and the value is value |
| sessionStorage/localStorage.removeItem(key) | Remove data whose key value is key |
| sessionStorage/localStorage.clear() | clear all data |