Front-end knowledge --Javascript review articles (six)

fetch

On the basis of native ajax + es6promise package on a syntactic sugar, promise to return the object.

fetch(url, initObj)
    .then(res=>res.json())
    .then(data=>{
    //这里得到返回的json对象,可进行操作
})
    .cateh(err){
    console.log(err);
};

//initObj
{
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  }

cookie，localStorage，sessionStorage，indexDB

• cookie

  Returning a response from the server by the browser is provided for storing the session information. Nature is bound to a particular domain name, when setting a cookie, give create its domain name when sending the request will include the cookie. It can not be accessed by other domains (cross-domain cookie is not sent by default CROS).

  composition:

  • Name name: not case sensitive and need to be URL encoded
  • Value value: subject to URL encoding
  • Domain domain: cookie is valid for which domain, all requests sent to that domain will be included in the cookie
  • Path path: sends a cookie to the domain specified path
  • Failure Time expires: timestamp indicating when the cookie should be deleted, the default is immediately removed at the end of the browser session
  • Security identity secure: After you specify only sent to the server using SSL connection to

  document.cookie too bad this API will return the string all the pages available at the time of cookie used to acquire property:

  name1=value1;name2=value2;name3=value3

  All names and values ​​are URL-encoded, so you must use decodeURIComponent () to decode

  Used to set the value:

  document.cookie = `name=value;expires=${new Date(new Date().getTime() + 
          24 * 60 * 60 * 1000).toUTCString()};path=domain_path;domain=domain_name;secure`; 

  cookie unless the cookie name does not overwrite existing settings

• localStorage

  To access the same localStorage homologous target page must follow the rules, data will be retained by JS to delete or user clears the browser cache.

  method:

  • setItem(name, value)
  • getItem(name)
  • removeItem(name)

• sessionStorage

  Specific data stored in a server session, local inaccessible, leaving only the browser is closed.

  The same method to localStorage.

• indexDB

  One kind of database stores structured data in the browser, asynchronous, event need to register to process the results.

  The same manner as with the above three storage, not shared across domains.

JSONP (JSON with padding) filled JSON

By the callback function and data. When the response function to be called when the page callback function, the name is specified in the request. Incoming data is in JSON data callback function.

In fact, just the same GET request, through the back of the URL parameter (the name of the filter criteria and send callback function), the screening function calls return the appropriate data in the server, so the client receives the data.

insufficient:

1. Limited to the GET method, and the need to ensure the security domain (avoid inclusion of malicious code in response).
2. To determine whether the failed JSONP request will not be easy, though H5 new onerror event script tag but anxious to catch compatibility.

Ping image

It is also a cross-domain request, but a simple way to the way a cross-domain communication with the server. And GET request in a manner analogous way, but it is not possible to obtain the response data.

var img = new Image();
img.onload = img.onerror = function(){  //知道响应什么时候能收到
    alert("done");
};
img.src = 'http://www.xxx.com/test?name=simple';  //发送了一个name参数

insufficient:

1. Limited to GET requests
2. You can not access the response body