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后面的参数（发送筛选条件和回调函数的名字），在服务器中筛选合适的数据返回函数调用，让客户端接收到数据。
不足：
- 仅限于GET方法，而且需要保证域的安全性（避免响应中夹杂恶意代码）。
- 要确定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参数
不足：
- 仅限于GET请求
- 无法访问响应主体