前端知识点回顾——Javascript篇(六)

fetch

在原生ajax+es6promise的基础上封装的一个语法糖，返回promise对象。

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

  由服务器通过返回响应在浏览器上设置，用于存储会话信息的。性质上是绑定在特定的域名下的，当设定了一个cookie后，再给创建它的域名发送请求时都会包含这个cookie。无法被其他域所访问(CROS跨域时默认不会发送cookie)。

  组成：

  • 名称name：不区分大小写且需经过URL编码
  • 值value：需经过URL编码
  • 域domain：cookie对哪个域是有效的，所有向该域发送的请求中都会包含这个cookie
  • 路径path：对于域中指定的路径才发送cookie
  • 失效时间expires：表示cookie何时应该被删除的时间戳，默认是浏览器会话结束时立即删除
  • 安全标识secure：指定后只有在使用SSL连接才能发送到服务器

  document.cookie这个API过于蹩脚，用于获取属性时会返回页面可用的所有cookie的字符串：

  name1=value1;name2=value2;name3=value3
  

  所有名字和值都是经过URL编码，因此必须使用decodeURIComponent()来解码

  用于设置值：

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

  不会覆盖cookie除非设置的cookie名称已存在

• localStorage

  要访问同一个localStorage对象页面必须遵循同源规则，数据会保留到通过JS删除或者用户清除浏览器缓存。

  方法：

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

• sessionStorage

  存储特定于某个服务器会话的数据，本地不可访问，只保留到浏览器关闭。

  方法于localStorage同。

• indexDB

  在浏览器中保存结构化数据的一种数据库，异步进行，需要注册事件来处理结果。

  同上面三种存储方式相同，不能跨域共享。

JSONP(JSON with padding)填充式JSON

由回调函数和数据组成。回调函数时当响应来时应该在页面中调用的函数，这个名字是在请求中指定的。数据就是在传入回调函数中的JSON数据。

其实就像是GET请求一样，通过URL后面的参数（发送筛选条件和回调函数的名字），在服务器中筛选合适的数据返回函数调用，让客户端接收到数据。

不足：

1. 仅限于GET方法，而且需要保证域的安全性（避免响应中夹杂恶意代码）。
2. 要确定JSONP请求是否失败并不容易，虽然H5新增script标签的onerror事件但是兼容性捉急。

图像Ping

也是一种跨域请求，但是一种简单的单向的向服务器通信的一种跨域方式。请求的方式和GET方式类似，但是却不能够获得响应的数据。

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

不足：

1. 仅限于GET请求
2. 无法访问响应主体