preface

Self summary, if have wrong place, still hope everybody points out.

1. Browser storage

1.1 the cookie

HTTP a stateless protocol. When requesting a server, HTTP requests need to carry cookies to authenticate users.

Cookie composition:

1. Name 2. Value 3. Value 5. Path 6. Expiration time (Expiers/ max-age) 7. 8. Whether this is an HTTP request (HttpOnly) 9. Secure tip: Domain, path, expiration time, and security are all indications that the server sends to the browser. They are not sent to the server with the request, only name and value pairs.Copy the code

Cookie limits:

  • You can set the expiration time; If it is not set, it is the same level as session. If you close the browser, it will disappear.

Advantages and disadvantages of cookies:

  • [Advantages:]
  1. Can control the expiration time, will not be permanent, there is a certain security.
  2. It can be extended and shared across domains.
  3. Through encryption and secure transmission (SSL) technology, you can reduce the possibility of Cookie cracking.
  4. High compatibility.
  • [Disadvantages:]
  • There is a limit on the number and length of each Cookie. The length of each Cookie cannot exceed 4 KB, otherwise the excess part will be truncated.
  • Data in the request header is vulnerable to interception attacks.
  • Individual cookies are no more than 4KB in size, and many browsers limit them to 20 cookies per site

generation

Generated by the server, stored in the client, used forMaintaining state

1.2 web Storage

H5 can store users’ browsing data locally. Previously, cookies were used, but Web Storage is faster and safer. Can store large amounts of data without compromising site performance in key/value pairs. Web Storage is divided into two types: sessionStorage and localStorage. SessionStorage stores data in the session and disappears when the browser is closed, while localStorage stores data locally on the client. Its API provides the following methods:

  • SetItem (key, value) — Saves data, stored as key-value pairs.

  • GetItem (key) — Read the data, pass in the key, and get the corresponding value.

  • RemoveItem (key) — Deletes some data, removing the key-value pair.

  • Clear () — Deletes all data.

  • Key (index) — Gets the key of an index

sessionStorage

- Size 5Mb - Data does not disappear when the page is refreshed, it disappears when the page is closed. - Cannot cross pages (only used on the current page). - Use windox. open to open the page and change the location.href mode to obtain the data inside the sessionStorage.Copy the code
  • [Application scenario:]

    1. Mainly for the storage of small data at the session level.

    2. Stores information that needs to be stored when the current page is refreshed, but does not need to be left behind when the page is closed.

    3. Ideal for single-page applications where you can store login information and so on.

localStorage

- Size 5Mb - can span pages. - Permanent storage, which needs to be manually deleted. - Use windox. open to open the page and change the location.href mode to obtain the data inside the sessionStorage.Copy the code
  • [Application scenario:]

    1. Persistent client data that can only be deleted via JavaScript or the user clears the browser cache.

    2. If there is some slightly large amount of data, such as editor autosave, etc.

    3. Access common data across multiple pages. SessionStorage can only be used for a single TAB, while localStorage can be shared across multiple tabs.

2. Browser caching mechanism

2.1 HEADERS related to HTTP

– Expires: indicates the response header, which indicates the expiration time of the resource. – cache-control: indicates the request header or response header. It is a Cache Control field. – Etag (HTTP1.1): Response header, resource id, and server storage. Etag changes when the resource is modified. -lF-none-match (HTTP1.1): Request header. The server compares if-none-match to the latest ETag of the requested resource. – last-Modified (HTTP1.0) : indicates the response header when the resource was Last Modified. – if-modified-since (HTTP1.0) : Request header, when the resource was last Modified (more on later). Bug: 1. If the resource update rate is less than seconds, then the cache is not available, because its minimum time unit is seconds. 2. If the file is dynamically generated by the server, then the update time of this method is always the generation time, although the file may not be changed, so it does not serve as a cache.


2.2 strong cache

Determine whether or not the time has expired (the server notifies the browser of the Cache time, with header information in cache-Control and Expires). If the time has not expired, it is taken directly from the Cache, which is called “strong Cache”.

Expires

Field used by HTTP1.0 to indicate the expiration time of the cache, that is, the valid time + the time of the server at that time.

Defect:

Users can change the local time on the client. As a result, the browser determines that the cache is invalid and requests the resource again. In addition, the time on the client is inconsistent with that on the server, causing the cache to become invalid.

Cache-control

  • Max-age: Sets the maximum period for the cache. As opposed to Expires, the time is relative to the request.

  • S-maxage: The same as max-age. This parameter is used only for shared caches, such as CDN caches.

  • Public: The corresponding can be cached by any object, even if it is not normally cached.

  • Private: The cache can only be cached by a single user and cannot be used as a shared cache (that is, the proxy server cannot be cached).

  • No-cache: Cache can be cached on the client, but each time you have to check the freshness of the server to decide whether to get the latest resource from the server (200) or to read the cache (304), i.e. the negotiated cache.

  • No-store: : Storage is not allowed on the client, and new resources must be requested from the server each time.

Last-modified & the If – Modified – Since (HTTP1.0)

Request header, the last time the resource was modified; When asked again, the server compares the if-modified-since field to the last-Modified field. If yes, the status code is not modified and 304 is returned. If no, the data and 200 status code are returned

2.3 Negotiation Cache

Because the server updates resources in seconds, it cannot recognize that multiple changes are made in one second. If the resource update rate is less than 1ms, a new last modification time cannot be generated. So there’s a new set of fields, Etag and if-none-match.

Etag & the If – None – Match (HTTP1.1) :

Etags are attributes of HTTP1.1 that are generated by the server and returned to the client. The priority is higher than last-modified.

When the first HTTP request is made, the server returns an Etag.

On the second request, the client sends an if-none-match with the value Etag, and the server compares this Etag to the server’s Etag.

If so, set if-none-match to false, return 304, and use the cache. If not, set if-none-match to true, returning 200 and the data.