cookie

解构赋值：  https://blog.csdn.net/Wave_explosion/article/details/121795032

一、cookie的API

1、cookie默认是会话级别的，可以设置过期时间

 2、cookie会保存在客户端

2.1 cookie概念：

​              客户端会话技术，将数据保存在客户端

2.2  前端操作cookie的API：

*获取cookie    

```javascript

document.cookie  

```

* 设置cookie

           document.cookie = 'key=value;'

* 设置cookie的过期时间

  ```javascript

  document.cookie = 'key=value;expires=时间对象'

  例如：

    document.cookie = 'name=jack';

    document.cookie = 'age=18;expires = '+new Date()

cookie的删除

  ```javascript

  cookie不能直接删除，需要侧面进行删除

  两种方法：

   a. 将键对应的值设置为''

   b. exptires = '-1';

  

2.3 cookie 的特点：

* cookie是与浏览器相关的，不同的浏览器所保存的cookie也是 不能相互访问的

* cookie可能会被用户删除

* cookie的安全性不够高，如果想要保存用户名和密码，必须进行加密处理

* cookie'存储的数据量在4k左右，cookie支持字符串形式的数据

* cookie信息存储在硬盘上，因此可以作为全局变量

  

  万能写法：

  document.cookie = "name='';expires=-1"

3、封装一个getCookie

```javascript

function getCookie(key){

    let str = document.cookie;// username=zhangsan; sex=男; age=18

    let arr = str.split('; ');//分号+空格  ['username=zhangsan','sex=男','age=18']

    for(let i=0;i<arr.length;i++){

        let item = arr[i].split('=');//每一个元素'username=zhangsan'  [‘username','zhangsan']

        if(item[0]==key){

            return item[1];

        }

    }

    //如果没有cookie，或者有cookie，但是没有找到key，得不到cookie，返回一个字符串

    return ';'

}

4、封装一个setCokkie

```javascript

function setCookie(key,value,day){

    let d = new Date();

    d.setDate(d.getDate()+day);

    document.cookie = key+'='+value+';expires='+d;

}

```

5、封装一个delCookie

```javascript

function delCookie(key){

    setCookie(key," ",-1);

}

```

 6、作用

```

（1）判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）。

（2）保存上次登录的事件等信息。

（3）保存上次查看的页面

（4）浏览计数

7、关联性知识（初步认识）

html5中的Web Storage包括了两种存储方式：localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问

并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅、是会话级别的存储。只允许同一窗口访问。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

localStorage和sessionStorage 使用相同的API

　　　　localStorage.setItem("key","value") //以"key"为名称存储一个值"value"

　　　　localStorage.getItem("key")//获取名称为"key"的值

　　　　localStorage.removeItem("key")//删除名称为"key"的信息

　　　　localStorage.clear() //清空localstorage中所有的信息

清空

function clearData(){

  localStorage.clear();

}

获取

function getData(){

  var collection=localStorage.getItem("todo");

  if(collection!=null){

    return JSON.parse(collection);

  }

  else return [];

}

设置

function saveData(key,data){

  localStorage.setItem(key,JSON.stringify(data));

}

同步和异步

同步任务：是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行下一个任务。这就产生了一个问题，如果前一个任务的耗时就比较长，后续的任务则需要等待前一个任务完成，从而阻塞代码的执行。

异步任务：在程序运行的时候，如果前一个任务比较耗时，并不会等待任务返回结果，而是继续执行后续的任务。当前一个任务结果返回以后，再去执行相关的任务。异步任务很好的解决了代码运行中的阻塞问题。

异步任务：

* 定时器：setTimeout   setInterval

* ajax的异步请求

* es6的promise

1.回调函数(callback)**                异步函数取值问题：回调函数方式解决

回调函数的定义:

函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

Promise对象

1、promise概念

 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

* 简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

* 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

2、promise特点

将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数（回调地狱）

它只有两种状态可以转化，即

- **操作成功:**pending -> fulfilled

- **操作失败:**pending -> rejected

3、promise实现原理

ES6 规定，`Promise` 对象是一个构造函数，用来生成 `Promise` 实例。通过在函数内部 return 一个 `Promise` 对象的实例，这样就可以使用 `Promise` 的属性和方法进行下一步操作了。

```javascript

Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署

promise的方法：`then()`方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数.

而 `Promise`的优势就在于这个链式调用。我们可以在 then 方法中继续写 `Promise` 对象并返回，然后继续调用 `then` 来进行回调操作。
 4、promise的api方法

4.1、**.then(callback)**

Promise对象含有then方法，then()调用后返回一个Promise对象，意味着实例化后的Promise对象可以进行链式调用，而且这个then()方法可以接收两个函数，一个是处理成功后的函数，一个是处理错误结果的函数。

```javascript

var promise1 = new Promise(function(resolve, reject) {

  // 2秒后置为接收状态

  setTimeout(function() {

    resolve('success');

  }, 2000);

});

promise1.then(function(data) {

  console.log(data); // success

}, function(err) {

  console.log(err); // 不执行

}).then(function(data) {

  // 上一步的then()方法没有返回值

  console.log('链式调用：' + data); // 链式调用：undefined 

}).then(function(data) {

  // ....

});

```

catch(callback)**

catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数

```javascript

var promise3 = new Promise(function(resolve, reject) {

  setTimeout(function() {

    reject('reject');

  }, 2000);

});

promise3.then(function(data) {

  console.log('这里是fulfilled状态'); // 这里不会触发

  // ...

}).catch(function(err) {

  // 最后的catch()方法可以捕获在这一条Promise链上的异常

  console.log('出错：' + err); // 出错：reject

});

```

 5、promise封装ajax

 

async 和await

```javascript

async 函数   await 后跟着一个promise对象

async function getData(){

    let hotpot = await getHotpot(); //拿到resolve传递出来的数据

    console.log(hotpot);

    let tea = await getTea();

    consloe.log(tea);

}

getData();