Local storage for the browser

  • The localStorage of a browser is divided into cookies, WebStorage, and IndexedDB. WebStorage can be divided into localStorage and sessionStorage

Cookies (previously used for storage in HTML5)

  • It is used for browser and server communication
  • Document. cookie = ‘… ‘to modify
  • Cookies were not originally designed for local storage, but rather to compensate for HTTP’s lack of state management
  • HTTP is a stateless protocol. The client sends a request to the server, and the server returns a response.
  • A Cookie is essentially a small text file stored in the browser, internally stored in the form of key-value pairs (as can be seen in the Application column of Chrome developer panel). The server gets the Cookie and parses it to get the state of the client
  • Cookie is used for state storage, but it also has many fatal defects:
    1. Capacity defects. Cookies are limited to 4KB and can only be used to store small amounts of information
    2. Performance defects. Cookies follow the domain name, regardless of whether a certain address below the domain name needs the Cookie, the request will carry the complete Cookie, as the number of requests increases, will cause a huge performance waste, because the request carries a lot of unnecessary content
    3. Security defects. Since cookies are passed in plain text between the browser and the server, they 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 JS scripts
    4. Only document.cookie = ‘… ‘to modify

loacalStorage

And the similarities and differences between the Cookie
  • 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.
  • However, it is quite different from cookies
    1. Capacity. The maximum capacity of localStorage is 5M, which is greatly increased compared to the 4K capacity of Cookie. Of course, this 5M is for a domain name, so it is persistent for a domain name
    2. It is stored only on the client and does not participate in server communication by default. This is a good way to avoid the performance and security issues associated with cookies
    3. Excuse encapsulation. It is very convenient to be exposed globally through localStorage and operate through its setItem and getItem methods.
Mode of operation
  • How do I operate localStorage
let obj = { name: "sanyuan".age: 18 };
localStorage.setItem("name"."sanyuan"); 
localStorage.setItem("info".JSON.stringify(obj));
Copy the code
  • Then enter the same domain name to get the corresponding value:
let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));
Copy the code
  • LocalStorage actually stores strings. To store objects, you need to call JSON’s Stringify method and parse them into objects using json.parse
Application scenarios
  • Using localStorage large capacity and persistent features, you can use loaclStorage to store some stable content resources, such as the official website logo, store Base64 format image resources, so use localStorage

sessionStorage

The characteristics of
  • SessionStorage is the same as localStorage in the following aspects:
    1. Capacity. The maximum capacity is 5M
    2. Only clients exist and do not communicate with the server by default
    3. Interface encapsulation, except sessionStorage name change, storage mode, operation mode are the same as loacStorage
  • However, there is an essential difference between sessionStorage and localStorage, 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
  1. You can use it to maintain form information, store form information in it, and ensure that the page, even if refreshed, will not lose the previous form information
  2. You can use it to store the browsing history. If you don’t need these records after closing the page, use sessionStorage, such as Weibo

IndexedDB

  • IndexDB is a non-relational database that runs in a browser, essentially a database, and in theory there is no upper limit to its capacity.
  • Some of the important features of IndexDB, in addition to having features of the database itself, such as support for transactions and storage of binary data,
    1. Key-value pair storage. Internally, data is stored in an object warehouse, in which data is stored in the form of key-value pairs
    2. Asynchronous operation. Database read and write operations are I/O operations. The browser supports asynchronous I/O operations.
    3. Restricted by the same origin policy, that is, cross-domain databases cannot be accessed

conclusion

  • Cookies are not good for storage and have a lot of bugs
  • Web Storage, including localStorage and sessionStorage, does not communicate with the server by default
  • IndexedDB is a non-relational database running in a browser that provides an interface for storing large data
  • LoaclStorage data is permanently stored unless it is deleted by code or manually