【 introduction 】
First of all, as the title says, these four things are all about front-end storage. Because HTTP is a stateless protocol, the server sometimes needs to know some information about the client (such as whether the client is logged in, permission issues, etc.), and the above four storage apis come into being.
“Cookies”
1. Storage upper limit: 4kb.
2. Features: Each HTTP transfer is automatically tagged, and when the Secure field is set to true, only the current address can be read. If http-only is set on the server, js cannot operate cookies.
3. Expire: The default TAB page will expire after it is closed, which can be set through expire.
4. Scope: Determined by domain and path. Domain is the current domain name or the parent domain name of the current domain name, and the current path or the parent path of the current path
5. Where it’s stored: Although we can get the cookie in the request header, its essence is probably still on the hard drive.
6. Application scenario: Interaction with the server is required for each information processing.
7. Disadvantages: less storage, troublesome operation, increase transmission burden.
【 sessionStorage 】
1. Storage upper limit: 5 to 10mb, slightly different from different manufacturers.
2. Features: Close the TAB page and it will disappear. There is no persistence and synchronization operation.
3. Validity: Close TAB page will not be.
4. Scope: Same source (same port, same domain name, same protocol).
5. Storage place: it should be in memory, but the access speed is still very slow. It takes half an hour to store 1MB data at a time.
6. Application scenario: There is no need to do persistence, and a small amount of data processing does not need to interact with the backend every time.
7. Disadvantages: small storage capacity, performance significantly decreases with the reduction of capacity, different projects exist together, difficult to maintain, can only save strings.
【 localStorage 】
1. Storage upper limit: 5 to 10mb, slightly different from different manufacturers.
2. Features: Persistent, same source document different TAB pages can share information and even monitor modification, synchronous operation.
3. Validity period: It will exist permanently if it is not deleted.
4. Scope: Same source (same port, same domain name, same protocol).
5. Storage: Hard drive.
6. Application scenario: When persistence is required and a small amount of data is processed without interaction with the backend every time.
7. Disadvantages: small storage capacity, performance significantly decreases with the reduction of capacity, different projects exist together, difficult to maintain, can only save strings.
【 indexDB 】
1. Storage upper limit: basically unlimited, slightly different from manufacturer.
2. Features: Persistent, different projects under the same domain name can create different databases for their own use, asynchronous operation, can save binary (BLOB) data.
3. Validity period: It will exist permanently if it is not deleted.
4. Scope: Same source (same port, same domain name, same protocol).
5. Storage: Hard drive.
6. Application scenario: When persistence is required and large amounts of data are processed without interaction with the backend every time.
7. Disadvantages: Performance will not significantly decrease as data changes (2.5MB data, although not accurately calculated, but at least half an hour, but webStorage,2 hours past or not good).
Common problems solved:
Many companies often have several lines of business under the same domain name, such as a.com/a.html and a.com/b.html. In the long run, there will be insufficient localstorage. (SessionStorage) DOMException — Google 81
Solution:
- Divide localstorage and issue relevant specifications.
- Use indexDB instead
【 note 】
Since the native indexDB API was too basic to meet actual production needs, I did a search on the Internet and there was no recognized best solution, so I wrote an indexDB tool library myself.
Github:github.com/michael2010…
Gitee :gitee.com/iwangcx/ind…
reference
indexDB API
IndexDB Ruan Yifeng tutorial
Blog.csdn.net/wang3792756…