1. The introduction

One type of browser question you might ask during an interview is about local storage. What you’re looking at is the front end’s knowledge base for the browser.

2. Four storage systems

F12->Application (Web SQL is obsolete)

F1 Cookie

  • It is a noun that we are very familiar with. It is a simple text file stored in a client that is associated with a particular Web document, holding information about when the client accesses the Web document, and making it available to the client when it accesses the Web document again. Because of the magic of “cookies” that can be saved on the client, it helps us to record personal information about users. The most common is the account, user name and so on saved when logging in.

  • Composition consists of a Name, a Value, and several other optional attributes that control the validity, security, and scope of the Cookie. Secure and HTTpOnly are asked a lot. Other attributes:

    1.Expires: Sets the Cookie lifetime. There are two types of storage cookies: session and persistence. Path: defines the directory on the Web site that can access the Cookie. 3.Secure: specifies whether to send the Cookie using the HTTPS security protocol. The HTTPS protocol protects cookies from being stolen or tampered with during transmission between the browser and Web server. HTTPOnly: used to prevent client scripts from accessing cookies through the document.cookie attribute, which helps protect cookies from being stolen or tampered with by cross-site scripting attacksCopy the code

  • Cause: This involves the characteristics of network protocol: HTTP protocol is a stateless protocol, the client sends a request to the server, the server returns a response. The second time you connect, you have to re-attach your identity, making for a lot of bad experiences. So cookies are designed to optimize HTTP requests.

  • Features:

    1. As the name suggests, the capacity is a small biscuit, only about 4KB; 2.Cookie follows the domain name, regardless of whether a certain address below the domain name needs this Cookie, the request will carry a complete Cookie, so as to increase the number of requests, in fact, will cause a huge performance waste; 3. Although many attributes are designed to protect the security of cookie information, as cookies are transmitted in the form of plain text in browsers and servers, they are easy to be intercepted by illegal users and then tampered with a series of informationCopy the code

F2 localStorage

  • Introduction: in HTML5, a new localStorage feature is added, this feature is mainly used as a localStorage to use, to solve the problem of insufficient cookie storage space,
  • Features:
    1. Large cookie capacity is generally around 5Mz, this in different browsers localStorage will be different.
    2. 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
    3. Interface encapsulation. Exposed globally through localStorage and through itsetItemTake andgetItem Take such methods for operation, very convenient.

code

let obj = { name: "Kasugano Sora", age:21 }; localStorage.setItem("name", "Kasugano Sora"); localStorage.setItem("info", JSON.stringify(obj)); let name = localStorage.getItem("name"); let info = JSON.parse(localStorage.getItem("info")); //localStorage actually stores strings. If you want to store objects, you need to call JSON's stringify method and parse them into objects using json.parseCopy the code
  • Application scenario: Using the large capacity and persistence features of localStorage, you can use localStorage to store stable resources.

F3 sessionStorage

  • Summary: It is related to localStorage and is substantially the same.
  • Features:
    1. Has three characteristics of localStorage;
    2. LocalStorage localStorage for persistence. Data will never expire unless deleted. SessionStorage stores data that can only be accessed by pages in the same session and is destroyed when the session ends. Therefore, sessionStorage is not a persistent local storage, only session level storage. For example, if you log sessionStorage while opening a page, the session data is destroyed when you close the page or browser
  • Application scenario: Maintain form information, store sensitive accounts once, and store browsing records this time

F4 indexdb

  • Summary: As the capabilities of the browser continue to increase, more and more sites are considering storing large amounts of data on the client side, which can reduce the amount of data retrieved from the server and directly from the local data. The result is IndexedDB, which is a browser-provided local database that can be created and manipulated by web scripts, and is a key-value database, unlike traditional relational data. A value can be a complex structure object, and a key can be some attribute value of the object or any other object (including binary objects). You can use any property in the object as an index to speed up the search.
  • The characteristics of

    1. IndexedDB is inherently transactional. All database operations are bound to specific transactions that are committed automatically. IndexedDB does not support manual transactions.

    2. Most of the IndexedDB API is asynchronous, and when using asynchronous methods, the API does not immediately return the data to be queried, but instead returns a callback. The essence of an asynchronous API is to send an operation request to the database, and when the operation completes, we receive a DOM event that tells us whether the operation was successful or not, and the result of the operation.

    3. The same origin policy ensures the security of IndexedDB. Each source is associated with a different set of databases, and different sources are not allowed to access the databases of other sources.

  • Application scenario: webpage fixed cache of large data (commodity pictures, music, small movies, etc.),
  • Operation Manual: developer.mozilla.org/zh-CN/searc…

summary

  • F4 are all local storage, all in order to reduce the request time and optimize the user experience
  • Important attributes of cookie should be memorized, and the basic operation statements of the two stroages can be practiced more
  • Memory can be from the size, there is a comparison of time memory
  • Index DB is different and more complex. They don’t usually go too far

I am a junior, looking for an internship, and your mutual encouragement, I have a humble work, hope to correct