Browser local storage

The local storage of browser is mainly divided into Cookie、WebStorage and IndexedDB, among WebStorage It is divided into localStorage（ The local store ） and sessionStorage（ Session storage ）.

One 、Cookie

Cookie At first, it was not used for local storage , But to make up for HTTP Deficiencies in state management ：

HTTP Is a stateless protocol , Client sends request to server , Server returns response , But the next time the server sends a request, it cannot recognize the identity of the client , Therefore, there is Cookie.

Cookie It is essentially a small text file stored in the browser , It is stored internally in the form of key value pairs . Sending a request to the same domain name will carry the same Cookie, Server get Cookie To analyze , You can get the status of the client .

in other words ,Cookie The function of is to do State storage Of .

defects ：

1. Capacity defect .Cookie The upper limit of the volume is 4KB, It can only be used to store a small amount of information .
2. Performance defects .Cookie It's the domain name , Whether or not an address under the domain name needs this Cookie, It will carry a complete Cookie. In this way, as the requested data increases , It is easy to waste performance .
3. Safety defects . because Cookie In the form of plain text in browsers and servers , It's easy to be intercepted by illegal users , Then a series of tampering , And in Cookie Within the validity period of . in addition , stay HTTPOnly by false Under the circumstances ,Cookie Information can go directly through JS Script read .

Two 、WebStorage

WebStorage yes HTML One of the new local storage solutions ,WebStorage There are two types of API：localStorage and sessionStorage, The difference between the two depends on the name ,localStorage Permanently store data locally , Unless you explicitly delete or empty it ,sessionStorage The stored data is only valid during the session , If you close the browser, it will be deleted automatically .

1、localStorage

localStorage The storage of is string , If it is a storage object , Then you need to call JSON Of stringify Method , And use JSON.parse To parse into objects .

JSON.stringify() Method is used to JavaScript Value to JSON character string .
JSON.parse() Method to convert data to JavaScript object .

localStorage How to operate ：

let obj = {
     name: 'zhangsan', age: 18 };
localStorage.setItem('name', 'zhangsan');
localStorage.setItem('info', JSON.stringify(obj));

let name = localStorage.getItem('name');
let info = JSON.parse(localStorage.getItem('info'));

And Cookie Similarities and differences ：

• Same as ： For a domain name , That is, under the same domain name , Will store the same paragraph localStorage.

• different ：
  1、 Capacity .localStorage The online capacity of is 5MB.
  2、 Only stored on the client , By default, it does not participate in the communication with the server , This is a good way to avoid Cookie Performance and safety problems .
  3、 Interface encapsulation . adopt localStorage Global exposure , And through its setItem and getItem And so on .

Application scenarios ：

because localStorage The large capacity and persistence of , You can use localStorage Store some content stable resources , For example, on the official website logo, Storage Base64 Format image resources .

2、sessionStorage

And localStorage Similarities and differences ：

• Same as ：
  1、 Capacity .sessionStorage The online capacity is also 5MB.
  2、 Only stored on the client , By default, it does not participate in the communication with the server .
  3、 Interface encapsulation . Except for the name change ,sessionStorage The storage mode and operation mode of are the same as localStorage equally .

• different ：
  sessionStorage Save the data in Session In the object . and localStorage Save the data in the local hardware device of the client , Even if the browser is closed, the data still exists , You can continue to use it the next time you open the browser to visit the website .

Application scenarios ：

1、 have access to sessionStorage Maintain forms , Store the form information in it , Even refreshing the form can ensure that the previous form information will not be lost .
2、 have access to sessionStorage To store this browsing record , That is, the browsing record that you don't need when you close the page .

3、 ... and 、IndexedDB

IndexedDB Is a non relational database running in the browser , Theoretically, there is no upper limit for this capacity .

IndexedDB Characteristics of ：

In addition to some features of the database itself , For example, support transactions 、 Store binary data, etc , also ：

1、 Key value pair storage . The internal object warehouse is used to store data , The data in this object warehouse is stored in the form of key value pairs .
2、 Asynchronous operations . Database reading and writing belong to I/O operation , Asynchronous in browser I/O Provided support .
3、 Limited by homology strategy , That is, you can't access a cross domain database .

Four 、 summary

1. cookie Not suitable for storage , And there are many defects .
2. WebStorage It is divided into localStorage（ The local store ） and sessionStorage（ Session storage ）, By default, it will not participate in communication with the server . Their storage is in the form of strings , For complex objects, you can use JSON Object's stringify and parse To deal with it .
3. IndexedDB It's a non relational database running on a browser , It provides an interface for large data storage .

although WebStorage It is more suitable for local storage , But that doesn't mean WebStorage Can replace cookie, It's about having WebStorage after cookie Can only do what it should do —— As a channel for the client to interact with the server , Keep the client state . So just as a local storage solution WebStorage Is better than cookie Of .