“This is the first day of my participation in the August More Text Challenge.

The localStorage of a browser is divided into cookies, WebStorage, and IndexDB. WebStorage can be divided into localStorage and sessionStorage. This article introduces localStorage

localStorage

Similar to cookies, localStorage is specific to a domain name. That is, the same segment of localStorage will be stored under the same domain name.

Differences from cookies:

Capacity. The maximum capacity of localStorage is 5M, which is much higher than the 4K capacity of Cookie. Of course this 5M is for a domain name, so it is persistent for a domain name. Only clients exist and do not communicate with the server by default. This is a good way to avoid performance and security issues with cookies.

LocalStorage that can be cleared periodically

This approach can be used to store tokens, such as clearing the token cache after a day

1. First we need to customize the setItem and getItem events of localStorage

/ / in Storage. The prototype prototype on rewriting setItem Storage. The prototype. SetExpire = (key, value, expire) = > {let obj = {data: value, time: Date.now(), expire: expire }; SetItem (key, json.stringify (obj)); } / / in Storage. The prototype prototype on rewriting getIte Storage. The prototype. GetExpire = key = > {let val = localStorage. The getItem (key); if (! val) { return val; } val = JSON.parse(val); if (Date.now() - val.time > val.expire) { localStorage.removeItem(key); return null; } return val.data; }Copy the code

SetExpire (“token”, {token:’token’}, 1000*60*60*24); The first two parameters are used as usual with localStorage, and the last parameter is how long it will take you to clear the cache and then call our rewritten setExpire method to store two more parameters, one for the current time and the expire we wrote

Date.now() -val.time > val.expire When the time is now minus the last time we saved the token in the cache, If the cache clearing time is longer than our custom cache clearing time, we have completed the localStorage timed cache clearing function.

Cookie

Cookies were not originally designed for local storage. It makes up for HTTP’s lack of state management

HTTP protocol is a stateless protocol, the client sends a request to the server, the server returns a response, and that’s it, so how does the server know who the client is next time?

So cookies are created

A Cookie is essentially a small text file stored in the browser. All requests sent to the same domain name carry the same Cookie, and the server gets the Cookie for parsing, then it can get the state of the client.

Cookies are used for state storage, but they have many drawbacks:

Capacity defects. Cookies are only 4KB in size and can only be used to store a small amount of information performance defects. Cookies follow the domain name, regardless of whether a Cookie is required at an address under the domain name, the request will carry a complete Cookie. As the number of requests increases, it will actually cause a waste of performance, because the request carries a lot of unnecessary content. Security defects. Cookies are passed in plain text between browsers and clients, and can easily be intercepted by illegal users and then re-sent to the server within the Cookie’s validity period, which is quite dangerous. In addition, with HttpOnly false, Cookie information can be read directly from the JS script.

sessionStorage

SessionStorage and localStorage have an essential difference, that is, sessionStorage is only session level storage, not persistent storage. The session ends, that is, the page closes, and this part of the sessionStorage ceases to exist.

Application scenarios

You can maintain the form data, you can store the form information in it, you can ensure that even if the page is refreshed, you won’t lose the previous form information and you can use it to store the browsing history. If you don’t need these records after closing the page, use sessionStorage. In fact, weibo has taken such a way of storage.

IndexedDB

IndexedDB is a non-relational database that runs in the browser. It is essentially a database, and is by no means on the order of 5M for WebStorage, which is theoretically unlimited.

conclusion

If the novice has not enough, please correct, thank you!