start

Data cannot be separated from storage. It can be stored permanently, waiting for the next read. In the browser side, it also has several data storage capabilities, such as cookies, localStorage, sessionStorage, and IndexedDB. With the ability to store data, it can save a large amount of data in the browser side, reducing the pressure of back-end requests, and can directly obtain data from the client side. Let stateless Http requests have different identities, let the browser remember the last password you entered, remember your login status, let the shopping cart hold all your likes, let the recommendation engine know exactly what you looked at and searched for…

Cookie

Cookies are often used to store user tokens because cookies are attached to the request head of each Http request so that the background knows which user is doing the action.

Setting Mode:

  1. Set-cookie is used in the response header to Set the browser’s Cookie
  2. Use js Settings on the browser side
document.cookie="token=XXXXXX"

Copy the code

Read mode:

  1. document.cookie
  2. The background parses the request header

Features:

  1. The biggest 4 KB
  2. Each time along with the Http request header
  3. Have expiration time

LocalStorage

Too large a Cookie can be somewhat of an unnecessary performance penalty, since not all caches need to be sent along with Http requests. The advantages of localStorage change the absolute position of cookie, KV, larger capacity, will not expire.

Features:

  1. The biggest 5 MB
  2. It’s not sent along with Http
  3. There is no expiration time
  4. Apis are more elegant, key-value pairs
  5. Synchronization, speaking, reading and writing

LocalStorage exists in the window object, the browser environment can be directly called:

localStorage.setItem('key'.'value')



const value = localStorage.getItem('key')

Copy the code

We can think of browser caching as simply saving data directly to a file, and each read or write is IO to the file. The read and write functions of localStorage are synchronous functions that block the main JS process.

In actual business, we will encounter the need for data expiration in localStorage, so we need to encapsulate a method to save and verify expiration: Key, value, and expiration time are saved as objects. Json. stringify is converted to String for saving.

SessionStorage

Those familiar with the back end will be familiar with sessions, which are often used as session-level storage to save user login status. The principle is that the backend creates a hash (sessionID) and saves it to the login user’s browser in the form of cookies. The session is invalid when the browser is closed, which is equivalent to a set of authentication logic encapsulated on the server based on cookies.

Unlike on the server side, the scope of sessionStorage on the browser side is only in the current browser window (TAB). Even if the same browser has multiple Windows open, the sessionStorage between them is isolated and independent from each other.

SessionStorage is similar to localStorage, but differs in scope and life cycle.

Features:

  1. The biggest 5 MB
  2. It’s not sent along with Http
  3. Apis are more elegant, key-value pairs
  4. Synchronization, speaking, reading and writing
  5. If TAB is closed, it expires
  6. Scope is only within the current TAB

SessionStorage is used to store login user information and is automatically deleted when the page is closed.

IndexedDB

The non-relational database built in the browser, NoSQL small database, is also stored in KV mode, with transaction, asynchronous read and write, large capacity and other characteristics, because of the daily use of less will not be explained here.

As an interview question, you have a simple understanding of the line.

conclusion

The preceding three storage modes comply with the same origin policy of the browser, and all information is displayed in clear text on the browser, and important data needs to be encrypted.

When it comes to storage, we often talk about four key points:

  1. scope
  2. Where there is
  3. How much
  4. How long

Following these four key points will give you a strong impression of the browser’s cache.