The front-end sends requests mainly through three processes: request, processing and response. If this request is repeated over a short period of time, all three processes will be performed each time, affecting the user experience and stressing the server, and there are many solutions available. From the point of view of the server side, CDN, optimized interface, etc. This article focuses on the front end of the description.

Browser cache

When a browser requests a website, it loads a variety of resources, such as HTML documents, images, CSS and JS files. For content that doesn’t change often, the browser saves it in a local file. The next time you visit the same site, the browser directly loads the resources to speed up access. There is also a way to manually place the unchanged file (CSS, JS, etc.) in cookie, localStorage, sessionStorage, etc. (If the CSS, JS, etc. Will change, you can add version, through an interface to return the cache queue request resources need to update, and update again)

Advantages: 1, reduce page load time 2, reduce server load

cookie

A Cookie is some data stored in a text file on your computer.

When the Web server sends a Web page to the browser, the server does not record the user’s information after the connection is closed.

The purpose of cookies is to solve the problem of “how to record user information on the client “:

When a user visits a Web page, his name can be recorded in a cookie. The user’s access record can be read in the cookie the next time the user visits the page. Cookies are stored as name/value pairs, as follows:

username=John Doe
Copy the code

When a browser requests a Web page from a server, cookies belonging to that page are added to the request. The server obtains user information in this way.

Encapsulation of cookies


/ / set the cookie
/* cname: key,// cvalue: value,// key value exdays: // Expiration time (days) */
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
/*
  cname: //键名
*/
function getCookie(cname){
    var name = cname + "="; var ca = document.cookie.split('; '); for(var i=0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return"";
}
function checkCookie(){
    var user=getCookie("username"); if (user! =""){
        alert("Welcome" + user + "Visit again");
    }
    else {
        user = prompt("Please enter your name :".""); if (user! =""&& user! =null){ setCookie("username",user,30); }}}Copy the code

The disadvantage of the cookie

(1) Cookies may be disabled. If a user is concerned about privacy, he is likely to disable cookies in his browser.

(2) Cookies are browser-dependent. This means that cookies saved between different browsers are not accessible to each other, even if the same page is visited

(3) Cookies may be deleted. Because each cookie is a file on your hard drive, it is likely to be deleted by the user

(4) Cookie security is not high enough. All cookies are recorded in the file in the form of plain text. Therefore, if you want to save information such as user name and password, it is best to encrypt it in advance.

(5) The storage size is limited and the storage space is about 4-10KB

localStorage

In HTML5, a new localStorage feature is added. This feature is mainly used as localStorage to solve the problem of insufficient cookie storage space (the storage space of each cookie in cookie is 4k). The size of localStorage is generally supported by the browser is 5M. This will vary between browsers.

advantages

1. LocalStorage expands the 4K limit of cookies

2, localStorage will be able to store the first request data directly to the local, which is equivalent to a 5M size for the front-end page database, compared to cookie can save bandwidth, but this is only supported in the older version of the browser

disadvantages

1, the size of the browser is not uniform, and THE Internet Explorer version in IE8 or later only support the localStorage property

2. Currently, all browsers will limit the value type of localStorage to string, which requires some conversion for the common JSON object type in our daily life

3. LocalStorage is unreadable under the browser’s privacy mode

4, localStorage is essentially a string read, if the storage content will consume memory space, will lead to page card

5. LocalStorage cannot be crawled to localStorage

6. The only difference between sessionStorage is that localStorage is a persistent storage

use

First, when using localStorage, we need to determine whether the browser support localStorage property

If (! LocalStorage){alert(" Browser supports localStorage "); return false; }else{// main logical business}Copy the code

LocalStorage write, localStorage write there are three methods, here is a brief introduction

If (! LocalStorage){alert(" Browser supports localStorage "); return false; }else{ var storage=window.localStorage; Storage ["a"]=1; Storage. A =1; SetItem ("c",3); console.log(typeof storage["a"]); console.log(typeof storage["b"]); console.log(typeof storage["c"]); }Copy the code

In particular, the use of localStorage also follows the same origin policy, so different websites can not directly share the same localStorage

The deletion of the localStorage

1. Delete key-value pairs

/* key: key */ storage.removeitem (key);Copy the code

2. Clear all contents of localStorage


var storage=window.localStorage;
    console.log(storage);
    storage.clear();
    console.log(storage);
Copy the code

Access to the key value


var storage=window.localStorage;
    console.log(storage);
    storage.getItem(key);
    console.log(storage);
Copy the code

** Gets the key name

var storage=window.localStorage; for(var i=0; i < storage.length; i++){ var key=storage.key(i); console.log(key); }Copy the code

LocalStorage Other precautions

JSON is normally stored in localStorage, but localStorage automatically converts localStorage to a string

At this point we can use the json.stringify () method to convert JSON to a JSON string

sessionStorage

LocalStorage and sessionStorage are used to store temporary information of the client, the only difference is that localStorage is permanent, as long as the user does not clear the words, permanent, sessionStorage only exists in this session, When the window closes, it doesn’t exist

🏆 technology project issue 8 chat | magical function and problems of cache