Browser caching mechanism

Front-end caches are divided into network (HTTP) caches and browser local storage.

HTTP Caching Mechanism

Please step: Network protocol -HTTP- cache Caching mechanism

Browser local storage

Let’s first learn the differences between these types of storage by looking at tables

features Cookie localStorage sessionStorage indexedDB
Data declaration cycle Usually generated by the server, you can set the expiration time It is always present unless it is cleaned Clean up when the page is closed It is always present unless it is cleaned
Data storage size 4k About 5 m About 5 m The theory of infinite
Communicate with the server Requests are carried in the Http header, which has a slight impact on request performance Don’t participate in Don’t participate in Don’t participate in

<! – | | USES authentication and so on — — >

Cookie

It is mainly used to store user related information, such as login, permission, token, etc., but it should not be too large, because each HTTP request will carry, so the performance will be slightly affected. There are some security concerns with 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 |

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

advantages

  • The back-end set
  • Solve the authentication problem

disadvantages

  • It’s just 4m. It’s too small
  • Excessive cookies can be a huge performance waste
  • Don’t cross domain

Web Storage

localStorage

  • Local permanent storage, unless manually cleared, will not exist
  • Size: about 5M
  • Used to store stable resources such as CSS, JS, miniatures, etc.

sessionStorage

  • Page reply store. The page is automatically cleared when you close it.
  • Size: about 5M
  • Temporary data such as tokens, personal information, permissions, shopping cart information, etc

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

    • LocalStorage as long as the same protocol, the same host name (secondary domain name is not available), the same port, it can read/modify to the same localStorage data.

      • SessionStorage is a bit more stringent than localStorage. In addition to the protocol, host name (secondary domain name is not allowed), port, but also required to be in the same window (that is, the browser TAB).

use

  • Store data: setItem()

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

    localStorage.getItem('user_name')
  • Delete data for 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.

Theoretically, IndexedDB has no storage upper limit (typically no less than 250M). It can store not only strings, but also binary data.

I use is not a lot of specific usage can refer to: browser database IndexedDB introduction tutorial

PWA

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

These apps are ubiquitous and feature rich, giving them the same user experience benefits as native apps. This set of documents and guidelines tells you all about the PWA.

In fact, my understanding is that in the browser or other client application cache a WebApp, once use, cache the code to the local, open again without reloading.

Feel very familiar, this is not wechat small program?

In fact, now the micro channel small program, fast application is a kind of PWA implementation.

For example, vuePress supports PWA applications

Reference: MDN – PWA