The first two tortured soul: Can you talk about the browser's local storage? How the pros and cons of each?

Local storage is divided into the browser Cookie, WebStorageand IndexedDBwhich WebStoragecan be divided into localStorageand sessionStorage. Next we come to one analysis of these local storage solutions.

Cookie

CookieInitially it was designed to do is actually not stored locally, but to make up for HTTPthe lack of state management .

HTTP Protocol is a stateless protocol, a client sent a request to the server, the server returns a response, the story ended this way, but his next request to let the server know how the client who is it?

Against this background, it creates Cookie.

A small text file on the Cookie is essentially a browser inside the store, inside a way to store key-value pairs (in chrome developer panel Applicationyou can see this column). Sends the request under the same domain name, will carry the same Cookie, server parses get Cookie, able to get the status of the client.

Cookie's role is well understood, is used for state storage , but it also has many fatal defects:

1. Capacity defect. The upper limit of the volume Cookie only 4KB, used to store only a small amount of information.

2. Performance deficiencies. Cookie domain name followed, regardless of the domain name following a certain address or need the Cookie, the request will carry the complete Cookie, so with the increase in the number of requests, in fact, will cause a huge waste of performance, because the request carries a lot of unnecessary Content.

3. Security flaws. Because Cookie passed through as plain text in the browser and the server, it can easily be intercepted by unauthorized users, and then a series of tampering, re-sent to the server in the Cookie of validity, which is quite dangerous. Further, in HttpOnlythe case of the false, Cookie information can be directly read by the JS script.

localStorage

And Cookie similarities and differences

localStorageOne thing with Cookiethe same, that is, for a domain name, ie under the same name, the same will be stored for a period localStorage .

But it is relatively Cookiestill quite a few differences:

1. capacity. localStorage maximum capacity of 5M , compared to Cookiethe 4K greatly increased. Of course, this is 5M for a domain name, so for a domain name are persistent.

2. There is only the client, default is not involved in communication with the server-side. This will bring good to avoid the Cookie of performance problems and security issues .

3. Interface package. By localStorageexposure to a global, and through it setItemand getItemoperating methods, etc., it is very convenient.

Operation method

Next we look at the specific how to operate localStorage.

let obj = { name: "sanyuan", age: 18 }; localStorage.setItem("name", "sanyuan"); localStorage.setItem("info", JSON.stringify(obj)); 复制代码

Then the corresponding values ​​are able to get into the same domain:

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info")); 复制代码

As can be seen here, localStoragein fact, are stored in the string, if it is stored in the object need to call JSONthe stringifymethod, and dried JSON.parseto resolve into objects.

Scenarios

The use of localStoragelarge capacity and durable characteristics, can be used localStorageto store some content stable resources, such as the official website logo, the storage Base64format of image resources, so uselocalStorage

sessionStorage

Feature

sessionStorageThe following terms and localStorageconsistent:

• capacity. Maximum capacity but also for the 5M.
• There is only the client, default is not involved in communication with the server-side.
• Interface package. In addition to sessionStoragethe name change, storage, and mode of operation are localStoragethe same.

But sessionStorage, and localStoragethere is an essential difference is that the former only session-level storage is not persistent storage. Session ends, that is, the page is closed, this part sessionStorageceased to exist.

Scenarios

1. It can be maintained with the form information will be on the inside, you can ensure that the form information storage refresh the page even before the form information does not make the loss.
2. You can use it to store this history. If you close the page without these records, with sessionStoragevery appropriate. In fact microblogging to take such storage.

IndexedDB

IndexedDBIt is running in the browser 非关系型数据库, essentially a database, and by no means just WebStorage 5M of an order of magnitude, this capacity is theoretically no limit.

On its use, this article focuses on the principles and tutorial documentation on MDN has very detailed here do not go into details, interested can look at the use of the document .

Then we analyze IndexedDBsome important features, in addition to the database itself has characteristics, such as 支持事务, , 存储二进制数据and so some features need extra attention:

1. Key-value pair storage. Internal use 对象仓库to store data, the data object in the repository using the key on the way to memory.
2. Asynchronous operation. Database belonging write I / O operations, the browser provides support for asynchronous I / O.
3. By the same origin policy restrictions that can not access the cross-domain database.

to sum up

Browser development of various local storage and caching techniques, to front-end applications bring a lot of opportunities, PWA is also the basis of these excellent storage solution was able to develop. Re-comb the local storage solutions:

1. cookieNot suitable for storage, and there is a lot of flaws.
2. Web StorageIncluding localStorageand sessionStorage, and will not participate in the default communications server.
3. IndexedDBNon-relational databases to run on the browser, providing an interface to store large data.