Browser caching mechanism

Front-end caching is divided into network (HTTP) caching and browser local storage.

HTTP caching mechanism

Go to: Network Protocol-HTTP-Cache Cache mechanism

Browser local storage

Let’s start with a table to learn the differences between these storage methods

features Cookie localStorage sessionStorage indexedDB
Data declaration cycle Generally, it is generated by the server. You can set the expiration time Does not exist until it is cleared Clean up when the page is closed Does not exist until it is cleared
Data storage size 4k About 5 m About 5 m The theory of infinite
Communicates with the server The request is carried in Http headers, which has a slight impact on request performance Don’t participate in Don’t participate in Don’t participate in

Cookie

It is used to store user-related information, such as login, permissions, and tokens. However, it should not be too large because it is carried in each HTTP request, thus slightly affecting performance. There are also some security considerations for cookies.

Value | | | property | | how to protect the user login, should value encryption | | HTTP – only | cannot be accessed through the JS Cookie, Reduce XSS attacks | | secure | can only be carried in the agreement for the HTTPS requests | | the same – site | rules carry cookies in the browser can’t cross-domain request, reduce CSRF attacks |

Cookie’s job is not to store locally, but to “maintain state.” Because HTTP is a stateless protocol, that is, the client requests it once and the server responds with no information left behind. It’s like the friend you talk to all the time, everywhere, but you never know what you talked about last time, or what his name is. So how do I let him know I’m me? This is where a Cookie comes in. A Cookie is basically a small text file stored in the browser, attached to HTTP requests, that flies back and forth between the browser and the server. It can carry user information, and when the server checks the Cookie, it can get the status of the client, which can prove who I am. Cookies are stored as key-value pairs.

advantages

  • The back-end set
  • Resolve the authentication problem

disadvantages

  • Only 4m, too small
  • Excessive cookies can lead to a huge performance waste
  • Don’t cross domain

Web Storage

localStorage

  • Local permanent storage that does not persist unless manually removed
  • Size: about 5M
  • Used to store stable resources, such as CSS, JS, small diagrams, etc.

sessionStorage

  • Page call storage, disable automatic page clearing.
  • Size: about 5M
  • For temporary data: token, personal information, permissions, shopping cart information, etc

Note that both localStorage and sessionStorage follow the same origin policy:

    • As long as localStorage in the same protocol, the same host name (secondary domain name is not allowed), the same port, can read/modify to the same copy of localStorage data.
    • SessionStorage is more stringent than localStorage, in addition to protocol, host name (secondary domain name is not acceptable), port, but also in the same window (that is, the browser TAB).

use

  • Store data: setItem()

    localStorage.setItem('user_name', 'xiuyan')
  • Read data: getItem()

    localStorage.getItem('user_name')
  • Remove data corresponding to a key name: removeItem()

    localStorage.removeItem('user_name')
  • Clear data records: clear()

    localStorage.clear()

indexedDB

IndexedDB is a non-relational database that runs on a browser. Since it is a database, it is not 5M, 10M, such a small level of play.

Theoretically, IndexedDB has no storage upper limit (generally no less than 250MB). It can store binary data as well as strings.

I don’t use a lot of IndexedDB

PWA

PWA (Progressive Web Apps) uses modern Web apis and traditional Progressive enhancement strategies to create cross-platform Web applications.

These apps are ubiquitous and feature-rich, giving them the same user experience advantages as native apps. This set of documents and guides tells you everything you need to know about PWA.

In fact, my understanding is to cache a WebApp in the browser or other client applications. Once used, the code will be cached locally, and there is no need to load it again.

Feel very familiar with, this is not wechat small program?

In fact, now wechat small programs, fast applications are a KIND of PWA implementation.

For example, vuePress supports conversion to PWA

Reference: MDN – PWA

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event