异步函数、进程-线程-事件循环、throw异常处理、本地存储会话存储的汇总

分手后的思念是犯贱 2023-10-02 20:05 38阅读 0赞

#### 文章目录 ####

*   *  1.async、await
     *   *  1.1 异步函数写法
         *  1.2 异步函数返回值
         *  1.3 异步函数的异常
         *  1.4 await关键字
         *  1.5 await处理异步请求
     *  2.进程和线程
     *   *  2.1 认识进程和线程
         *  2.2 操作系统的工作方式
         *  2.3 浏览器中的JS线程
         *  2.4 浏览器的事件循环
         *  2.5 微任务宏任务
     *  3.Promise面试题
     *  4.错误异常处理
     *   *  4.1 认识throw
         *  4.2 throw使用
         *  4.3 Error类
         *  4.4 异常的处理
         *  4.5 异常的捕获
     *  5.Storage
     *   *  5.1 认识Storage
         *  5.2 Storage常见的方法和属性

### 1.async、await ###

#### 1.1 异步函数写法 ####

**async关键字用于声明一个异步函数：**

*  **async**是asynchronous单词的缩写，**异步、非同步**；
 *  **sync**是synchronous单词的缩写，**同步、同时**；

**async异步函数和普通函数一样可以有很多中写法：**

// 1.最常用的方式
    async function foo1() {
        }
    // 2.表达式定义异步函数
    const foo2 = async function() {
        }
    // 3.箭头函数定义异步函数
    const foo3 = async () => {
        }
    // 4.类中定义异步函数
    class Person {
        
      async foo() {
        }
    }

#### 1.2 异步函数返回值 ####

**异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。**

**异步函数有返回值时，和普通函数会有区别(异步函数返回的是一个Promise)：**

*  **情况一**：异步函数有**普通的返回值时，异步函数的返回值相当于被包裹到Promise.resolve中**；
    
        async function foo() {
              
          return 321 // 相当于Promise.resolve(321)
        }
        
        foo().then(res => {
              
          console.log(res) // 321
        })
 *  **情况二**：如果我们的**异步函数的返回值是Promise，状态由会由Promise决定**；
    
        const promise = new Promise((resolve, reject) => {
              
          setTimeout(() => {
              
            resolve(["aaa", "bbb", "ccc"])
          }, 3000)
        })
        
        async function foo() {
              
          return promise
        }
        
        foo().then(res => {
              
          console.log(res) // 延迟三秒打印['aaa', 'bbb', 'ccc']
        })
 *  **情况三**：如果我们的**异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定**；
    
        async function foo() {
              
          return {
              
            then: function(resolve, reject) {
              
              setTimeout(() => {
              
              resolve("aaa")
              }, 3000)
            }
          }
        }
        
        foo().then(res => {
              
          console.log(res) // 延迟三秒打印 aaa
        })

#### 1.3 异步函数的异常 ####

**什么情况下, 异步函数是已拒绝 (rejected) 状态**

*  **异步函数返回一个Promise主动调用reject会变成rejected状态**
    
        async function foo() {
              
          return new Promise((resolve, reject) => {
              
            reject("err rejected")
          })
        }
        
        foo().then(res => {
              
          console.log("res:", res)
        }).catch(err => {
              
          console.log("err:", err) // err: err rejected
        })
 *  **如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；**
    
        async function foo() {
              
          // 抛出一个异常
          throw new Error("my async funtion error")
          return "aaa"
        }
        
        foo().then(res => {
              
          console.log("res:", res)
        }).catch(err => {
              
          // catch会捕获异常
          console.log("err:", err) // err: Error: my async funtion error
        })

#### 1.4 await关键字 ####

**async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。**

**await关键字有什么特点呢？**

*  通常使用await是后面会**跟上一个表达式**，这个**表达式会返回一个Promise**；
 *  那么await会**等到Promise的状态变成fulfilled状态**，之后**继续执行异步函数**；
 *  **await后面表达的结果如果是fulfilled状态, 那么await会将Promise的resolve结果返回**
    
        function bar() {
              
          console.log("bar函数")
          return new Promise((resolve, reject) => {
              
            setTimeout(() => {
              
              resolve(123)
            }, 3000)
          })
        }
        
        async function foo() {
              
          console.log("await关键字前面的代码")
        
          // await后续跟一个表达式, 表达式返回一个Promise时, 会等待Promise有结果后, 将resolve的结果返回, 继续执行后续代码
          const res = await bar()
          console.log(res)
        
          console.log("await关键字后面的代码")
        }
        
        foo()
        
        // 打印结果
        // 1. 直接打印
        // await关键字前面的代码
        
        // bar函数
        // 2. 等待三秒再打印
        // 123
        // await关键字后面的代码

**如果await后面是一个普通的值，那么会直接返回这个值；**

async function foo() {
        
      console.log("await关键字前面的代码")
    
      const res = await 123
      console.log(res)
    
      console.log("await关键字后面的代码")
    }
    
    foo()
    
    // 打印结果
    // await关键字前面的代码
    // 123
    // await关键字后面的代码

如果await后面的表达式，**返回的Promiseed是reject的状态**，那么**相当于在异步函数中抛出了一个异常, 我们可以在catch方法中捕获, rejected状态后面的异步函数代码不会执行**；

function bar() {
        
      console.log("bar函数")
      return new Promise((resolve, reject) => {
        
        setTimeout(() => {
        
          reject("err message")
        }, 3000)
      })
    }
    
    async function foo() {
        
      console.log("await关键字前面的代码")
    
      const res = await bar()
      console.log(res)
    
      console.log("await关键字后面的代码")
    }
    
    foo().catch(err => {
        
      console.log("err", err)
    })
    
    // 打印结果
    // 1.直接打印
    // await关键字前面的代码
    // bar函数
    
    // 2.等待三秒打印
    // err err message

如果await后面**是一个thenable的对象，那么会根据对象的then方法调用来决定后续的值**；

function bar() {
        
      console.log("bar函数")
      return {
        
        then: function(resolve, reject) {
        
          resolve("aaa")
        }
      }
    }
    
    async function foo() {
        
      console.log("await关键字前面的代码")
    
      const res = await bar()
      console.log(res)
    
      console.log("await关键字后面的代码")
    }
    
    foo()
    
    // 打印结果
    // await关键字前面的代码
    // bar函数
    // aaa
    // await关键字后面的代码

#### 1.5 await处理异步请求 ####

**上一篇中, 我们最终是使用生成器处理网络请求, 在学习了await后, 我们可以使用await处理异步请求, 再进一步的优化代码**

*  为了方便大家观看, 我将上一篇中的代码拿过来可以回顾一下
    
        // 封装模拟网络请求的函数
        function requestData(url) {
              
          return new Promise((resolve, reject) => {
              
            setTimeout(() => {
              
              resolve(url)
            }, 2000)
          })
        }
        
        // 生成器的处理方案
        function* getData() {
              
          const res1 = yield requestData("why")
          console.log("res1:", res1)
        
          const res2 = yield requestData(res1 + "kobe")
          console.log("res2:", res2)
        
          const res3 = yield requestData(res2 + "james")
          console.log("res3:", res3)
        }
        
        // 自动化执行生成器函数(了解)
        function execGenFn(genFn) {
              
          // 1.获取对应函数的generator
          const generator = genFn()
          // 2.定义一个递归函数
          function exec(res) {
              
            const result = generator.next(res)
            if (result.done) return
            result.value.then(res => {
              
              exec(res)
            })
          }
          // 3.执行递归函数
          exec()
        }
 *  **我们再使用async函数和await关键字重构上面代码**
    
        function requestData(url) {
              
          return new Promise((resolve, reject) => {
              
            setTimeout(() => {
              
              resolve(url)
            }, 2000);
          })
        }
        
        async function getData() {
              
          const res1 = await requestData("aaa")
          console.log("res1:", res1) // aaa
        
          const res2 = await requestData(res1 + "bbb")
          console.log("res2:", res2) // aaabbb
          
          const res3 = await requestData(res2 + "ccc")
          console.log("res3:", res3) // aaabbbccc
        }
        
        // catch用于捕获异常
        getData().catch(err => {
              
          console.log("err:", err)
        })

### 2.进程和线程 ###

#### 2.1 认识进程和线程 ####

**线程和进程是操作系统中的两个概念：**

*  **进程（process）**：计算机**已经运行的程序**，是**操作系统管理程序**的一种方式；
 *  **线程（thread）**：操作系统能够运行**运算调度的最小单位**，通常情况下**它被包含在进程**中；

**听起来很抽象，这里还是给出我的解释：**

*  **进程**：我们可以认为，启动**一个应用程序**，就会**默认启动一个进程**（也可能是多个进程）
 *  **线程**：每**一个进程中**，都**会启动至少一个线程用来执行程序中的代码**，这个**线程被称之为主线程**；
 *  所以我们**也可以说进程是线程的容器**；

**再用一个形象的例子解释：**

*  操作系统类似于一个大工厂；
 *  工厂中里有很多车间，这个车间就是进程；
 *  每个车间可能有一个以上的工人在工厂，这个工人就是线程；

**这里有一幅图, 可以看一下帮助大家理解**:

![在这里插入图片描述][fdd4c02babbd44abb6f33d247aa7d718.png_pic_center]

#### 2.2 操作系统的工作方式 ####

**操作系统是如何做到同时让多个进程（边听歌、边写代码、边查阅资料）同时工作呢？**

*  这是因为**CPU的运算速度非常快**，它可以**快速的在多个进程之间迅速的切换**；
 *  当我们**进程中的线程**获取到**时间片**时，就可以**快速执行我们编写的代码**；
 *  对于用户来说**是感受不到这种快速的切换的**；

你可以在Mac的活动监视器或者Windows的资源管理器中查看到很多进程：

![在这里插入图片描述][c43b342c1aa045ddaf78a131f9143589.png_pic_center]

#### 2.3 浏览器中的JS线程 ####

我们经常会说**JavaScript是单线被程**（可以开启workers\*\*）**的，但是**JavaScript的线程应该有自己的容器进程\*\*：**浏览器或者Node。**

**浏览器是一个进程吗，它里面只有一个线程吗？**

*  目前**多数的浏览器其实都是多进程的**，当我们**打开一个tab页面时就会开启一个新的进程**，这是**为了防止一个页面卡死而造成所有页面无法响应**，整个浏览器需要强制退出；
 *  **每个进程中又有很多的线程**，其中**包括执行JavaScript代码的线程**；

**JavaScript的代码执行是在一个单独的线程中执行的：**

*  这就意味着JavaScript的代码，在**同一个时刻只能做一件事**；
 *  如果**这件事是非常耗时**的，就意味着当前的线程就**会被阻塞**；

**所以真正耗时的操作，实际上并不是由JavaScript线程在执行的：**

*  浏览器的**每个进程是多线程**的，那么**其他线程可以来完成这个耗时的操作**；
 *  比如**网络请求、定时器**，我们只需要在特性的时候执行应该有的回调即可；

#### 2.4 浏览器的事件循环 ####

**如果在执行JavaScript代码的过程中，有异步操作呢？**

*  中间我们插入了一个**setTimeout的函数**调用；
 *  这个**函数被放到入调用栈中**，**在线程中的执行会立即结束**，并**不会阻塞后续代码的执行**；

function sum(num1, num2) {
        
      return num1 + num2
    }
    
    function bar() {
        
      return sum(20, 30)
    }
    
    setTimeout(() => {
        
      console.log("10秒后的setTimeout")
    }, 10000)
    
    const result = bar()
    console.log(result)

![在这里插入图片描述][c00abb73da3742b0b6dec1cfa9f5c927.png_pic_center]

#### 2.5 微任务宏任务 ####

**但是事件循环中并非只维护着一个队列，事实上是有两个队列：**

*  **宏任务队列**（macrotask queue）：ajax、setTimeout、setInterval、DOM监听、UI Rendering等
 *  **微任务队列**（microtask queue）：Promise的then回调、 Mutation Observer API、queueMicrotask()等

**那么事件循环对于两个队列的优先级是怎么样的呢？**

1.  main script中的代码优先执行（编写的顶层script代码）；
2.  在**执行任何一个宏任务之前**（不是队列，是一个宏任务），都**会先查看微任务队列中是否有任务需要执行**
    
     *  也就是**宏任务执行之前，必须保证微任务队列是空的**；
     *  如果**不为空，那么就优先执行微任务队列中的任务**（回调）；

讲完这些后面我们就可以看看Promise的面试题了

### 3.Promise面试题 ###

**Promise、事件循环试题一**

**写出下面代码的执行顺序:**

setTimeout(function () {
        
      console.log("setTimeout1");
      new Promise(function (resolve) {
        
        resolve();
      }).then(function () {
        
        new Promise(function (resolve) {
        
          resolve();
        }).then(function () {
        
          console.log("then4");
        });
        console.log("then2");
      });
    });
    
    new Promise(function (resolve) {
        
      console.log("promise1");
      resolve();
    }).then(function () {
        
      console.log("then1");
    });
    
    setTimeout(function () {
        
      console.log("setTimeout2");
    });
    
    console.log(2);
    
    queueMicrotask(() => {
        
      console.log("queueMicrotask1")
    });
    
    new Promise(function (resolve) {
        
      resolve();
    }).then(function () {
        
      console.log("then3");
    });

**分析**:

1.  **初次执行会打印下面的全局代码**

// 全局代码打印
    // promise1
    // 2

*  **并将对应的异步放入对应的宏任务队列和微任务队列**

// 宏任务队列的函数
    // 1.第一个函数
    setTimeout(function () {
        
      console.log("setTimeout1");
      new Promise(function (resolve) {
        
        resolve();
      }).then(function () {
        
        new Promise(function (resolve) {
        
          resolve();
        }).then(function () {
        
          console.log("then4");
        });
        console.log("then2");
      });
    });
    // 2.第二个函数
    setTimeout(function () {
        
      console.log("setTimeout2");
    });

// 微任务队列的函数
    // 1.第一个函数 下面这个Promise中的then方法的回调
    new Promise(function (resolve) {
        
      console.log("promise1");
      resolve();
    }).then(function () {
        
      console.log("then1");
    });
    
    // 2.queueMicrotask函数
    queueMicrotask(() => {
        
      console.log("queueMicrotask1")
    });
    
    // 3.第三个函数 下面这个Promise中的then方法的回调
    new Promise(function (resolve) {
        
      resolve();
    }).then(function () {
        
      console.log("then3");
    });

1.  **全局代码执行完后, 会按照顺序执行微任务队列**

// 全局代码打印
    // promise1
    // 2
    
    // 微任务队列第一次打印
    // then1
    // queueMicrotask1
    // then3

1.  **当微任务队列中全部执行完成时, 就会按照顺序执行宏任务队列**

// 全局代码打印
    // promise1
    // 2
    
    // 微任务队列第一次打印
    // then1
    // queueMicrotask1
    // then3
    
    // 宏任务队列第一次打印
    // setTimeout1
    // then2

*  **当执行到宏任务队列的第一个函数, 发现有Promise的then方法, 又会将then方法的回调放入, 此时宏任务和微任务中函数分别如下**

// 宏任务队列的函数
    
    // 1.第一个函数
    setTimeout(function () {
        
      console.log("setTimeout2");
    });

// 微任务队列的函数
    
    // 1.第一个函数
    function () {
        
    	new Promise(function (resolve) {
        
    	resolve();
    }
    
    // 2.第二个函数
    function () {
        
    	console.log("then4");
    }

*  **当执行完宏任务队列中第一个函数, 会发现微队列中又添加了新的成员, 便会暂停执行宏任务队列, 继续执行微任务队列**

// 全局代码打印
    // promise1
    // 2
    
    // 微任务队列第一次打印
    // then1
    // queueMicrotask1
    // then3
    
    // 宏任务队列第一次打印
    // setTimeout1
    // then2
    
    // 微任务队列第二次打印
    // then4

*  **微任务队列再次为空之后, 再执行宏任务队列就是最终打印顺序**

// 全局代码打印
    // promise1
    // 2
    
    // 微任务队列第一次打印
    // then1
    // queueMicrotask1
    // then3
    
    // 宏任务队列第一次打印
    // setTimeout1
    // then2
    
    // 微任务队列第二次打印
    // then4
    
    // 宏任务队列第二次打印
    // setTimeout2

**Promise、事件循环试题二**

同样写出下面代码的打印顺序, 思路和上面一样

async function async1 () {
        
      console.log('async1 start')
      await async2();
      console.log('async1 end')
    }
    
    async function async2 () {
        
      console.log('async2')
    }
    
    console.log('script start')
    
    setTimeout(function () {
        
      console.log('setTimeout')
    }, 0)
     
    async1();
     
    new Promise (function (resolve) {
        
      console.log('promise1')
      resolve();
    }).then (function () {
        
      console.log('promise2')
    })
    
    console.log('script end')

这里直接给出答案

// script start
    // async1 start
    // async2
    // promise1
    // script end
    // async1 end
    // promise2
    // setTimeout

### 4.错误异常处理 ###

#### 4.1 认识throw ####

**开发中我们会封装一些工具函数，封装之后给别人使用：**

*  在其他人使用的过程中，**可能会传递一些参数**；
 *  对于函数来说，**需要对这些参数进行验证**，否则可能得到的是我们不想要的结果；

**很多时候我们可能验证到不是希望得到的参数时，就会直接return** :

*  但是return存在很大的弊端：**调用者不知道是因为函数内部没有正常执行，还是执行结果就是一个undefined**；
 *  事实上，正确的做法应该是**如果没有通过某些验证，那么应该让外界知道函数内部报错了**；

**如何可以让一个函数告知外界自己内部出现了错误呢？**

*  通过throw关键字，抛出一个异常(前面我们有简单的使用过)；

**throw语句：**

*  throw语句用于**抛出一个用户自定义的异常**；
 *  当**遇到throw语句时，当前的函数执行会被停止（throw后面的语句不会执行）**；

function foo() {
        
      console.log("aaa")
      throw "foo的错误"
      console.log("bbb")
      console.log("ccc")
    }
    foo()
    
    // 执行结果
    // aaa
    // Uncaught foo的错误

**如果我们执行代码，就会报错，拿到错误信息的时候我们可以及时的去修正代码。**

#### 4.2 throw使用 ####

**throw表达式就是在throw后面可以跟上一个表达式来表示具体的异常信息** ：

throw expression

**throw关键字可以跟上哪些类型呢？**

*  **基本数据类型**：比如number、string、Boolean
    
        function foo() {
              
          console.log("aaa")
          // 1. number类型
          throw 123
          console.log("bbb")
          console.log("ccc")
        }
        foo()
    
        function foo() {
              
          console.log("aaa")
          // 2. 字符串类型
          throw "abc"
          console.log("bbb")
          console.log("ccc")
        }
        foo()
    
        function foo() {
              
          console.log("aaa")
          // 3. Boolean类型
          throw true
          console.log("bbb")
          console.log("ccc")
        }
        foo()
 *  **对象类型**：对象类型可以包含更多的信息
    
        function foo() {
              
          console.log("aaa")
          // 错误信息也可以是一个对象类型
          throw {
              
            errMessage: "我是错误信息",
            errCode: -1001
          }
          console.log("bbb")
          console.log("ccc")
        }
        foo()
        
        // 打印结果
        // aaa
        // ncaught Error {errMessage: '我是错误信息', errCode: -1001}

**但是每次写这么长的对象又有点麻烦，所以我们可以创建一个类**：

class MYError {
        
      constructor(errMessage, errCode) {
        
        this.errMessage = errMessage
        this.errCode = errCode
      }
    }
    function foo() {
        
      console.log("aaa")
      throw new MYError("我是错误信息", -1001)
      console.log("bbb")
      console.log("ccc")
    }
    foo()
    
    // 打印结果
    // aaa
    // ncaught Error {errMessage: '我是错误信息', errCode: -1001}

#### 4.3 Error类 ####

**事实上，JavaScript已经给我们提供了一个Error类，我们可以直接创建使用这个类的对象**：

function foo() {
        
      throw new Error("我是错误信息")
    }
    foo()

**Error包含三个属性(一般都只传入一个参数)** :

*  **messsage**：创建Error对象时传入的message；
 *  **name**：Error的名称，通常和类的名称一致；
 *  **stack**：整个Error的错误信息，包括函数的调用栈，当我们直接打印Error对象时，打印的就是stack；

**Error有一些自己的子类**：

*  RangeError：下标值越界时使用的错误类型；
 *  SyntaxError：解析语法错误时使用的错误类型；
 *  TypeError：出现类型错误时，使用的错误类型；

#### 4.4 异常的处理 ####

**我们会发现在之前的代码中，一个函数抛出了异常，调用它的时候程序会被强制终止**：

*  这是因为如果我们在调用一个函数时，这个函数**抛出了异常**，但是我们**并没有对这个异常进行处理**，那么**这个异常会继续传递到上一个函数调用中**；
 *  而**如果到了最顶层（全局）的代码中依然没有对这个异常的处理代码**，这个时候**就会报错并且终止程序的运行**；

**我们先来看一下这段代码的异常传递过程**：

*  foo函数在被执行时会抛出异常，也就是我们的bar函数会拿到这个异常；
 *  但是bar函数并没有对这个异常进行处理，那么这个异常就会被继续传递到调用bar函数的函数，也就是test函数；
 *  但是test函数依然没有处理，就会继续传递到我们的全局代码逻辑中；
 *  依然没有被处理，这个时候程序会终止执行，后续代码都不会再执行了；
    
        function foo() {
              
          throw "foo error message"
        }
        
        function bar() {
              
          foo()
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")

#### 4.5 异常的捕获 ####

**但是很多情况下当出现异常时，我们并不希望程序直接推出，而是希望可以正确的处理异常**：

*  这个时候我们就**可以使用try catch**, **没有产生异常执行try中的代码, 捕获异常执行catch中的代码并且后面代码正常执行**
    
        function foo() {
              
          throw "coerwhy error message"
        }
        
        function bar() {
              
          try {
              
            foo()
          } catch(error) {
              
            console.log(error)
          }
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")
        
        // 打印结果
        // foo error message
        // 后续的代码

在ES10（ES2019）中，**catch后面绑定的error可以省略**。

function foo() {
        
      throw "coerwhy error message"
    }
    
    function bar() {
        
      try {
        
        foo()
      } catch {
        
        console.log("异常中代码")
      }
    }
    
    function text() {
        
      bar()
    }
    
    text()
    
    console.log("后续的代码")
    
    // 打印结果
    // 异常中代码

**当然，如果有一些必须要执行的代码，我们可以使用finally来执行**：

*  finally表示**最终一定会被执行的代码结构, 不管代码是否**；
 *  注意：如果try和finally中都有返回值，那么会使用finally当中的返回值；
    
        function foo() {
              
          throw "foo error message"
        }
        
        function bar() {
              
          try {
              
            foo()
            console.log("无异常代码")
          } catch(error) {
              
            console.log(error)
          } finally {
              
            console.log("finally中代码")
          }
        }
        
        function text() {
              
          bar()
        }
        
        text()
        
        console.log("后续的代码")

### 5.Storage ###

#### 5.1 认识Storage ####

**WebStorage主要提供了一种机制，可以让浏览器提供一种比cookie更直观的key、value存储方式** :

*  **localStorage**：本地存储，提供的是**一种永久性的存储方法**，在**关闭掉网页重新打开时，存储的内容依然保留**；
    
        // 将info保存到localStorage(本地存储)
        localStorage.setItem("info", "kaisa")
        // 从localStorage中获取info
        let info = localStorage.getItem("info")
        console.log(info) // kaisa

![在这里插入图片描述][a43c17741c274a11920ee7a50dab5b62.png_pic_center]

*  **sessionStorage**：会话存储，提供的是**本次会话的存储，在关闭掉会话时，存储的内容会被清除**；
    
        // 将age保存到会话存储
        sessionStorage.setItem("age", 18)
        // 从会话存储中获取age
        let age = sessionStorage.getItem("age")
        console.log(age) // 18

![在这里插入图片描述][fce16abc8fa64b6fb64b571d69c2ce7c.png_pic_center]

我们会发现localStorage和sessionStorage看起来非常的相似。

**那么它们有什么区别呢？**

*  **验证一**：**关闭网页后重新打开，localStorage会保留，而sessionStorage会被删除**；
 *  **验证二**：**在页面内实现跳转，localStorage会保留，sessionStorage也会保留**；
 *  **验证三**：**在页面外实现跳转（打开新的网页），localStorage会保留，sessionStorage不会被保留**；

#### 5.2 Storage常见的方法和属性 ####

**Storage(包含localStorage和sessionStorage)有如下的属性和方法：**

**属性：**

*  Storage.length：只读属性, 返回一个整数，表示存储在Storage对象中的数据项数量；
    
        console.log(localStorage.length) // 1

**方法：**

*  Storage.getItem()：该方法接受一个key作为参数，并且返回key对应的value；
 *  Storage.setItem()：该方法接受一个key和value，并且将会把key和value添加到存储中。如果key存储，则更新其对应的值；
 *  Storage.key(index)：该方法接受一个数值n作为参数，返回存储中的第n个key名称；
    
        console.log(sessionStorage.key(0))
 *  Storage.removeItem()：该方法接受一个key作为参数，并把该key从存储中删除；
    
        console.log(localStorage.removeItem("info"))
 *  Storage.clear()：该方法的作用是清空存储中的所有key；
    
        localStorage.clear()

[fdd4c02babbd44abb6f33d247aa7d718.png_pic_center]: https://img-blog.csdnimg.cn/fdd4c02babbd44abb6f33d247aa7d718.png#pic_center
[c43b342c1aa045ddaf78a131f9143589.png_pic_center]: https://img-blog.csdnimg.cn/c43b342c1aa045ddaf78a131f9143589.png#pic_center
[c00abb73da3742b0b6dec1cfa9f5c927.png_pic_center]: https://img-blog.csdnimg.cn/c00abb73da3742b0b6dec1cfa9f5c927.png#pic_center
[a43c17741c274a11920ee7a50dab5b62.png_pic_center]: https://img-blog.csdnimg.cn/a43c17741c274a11920ee7a50dab5b62.png#pic_center
[fce16abc8fa64b6fb64b571d69c2ce7c.png_pic_center]: https://img-blog.csdnimg.cn/fce16abc8fa64b6fb64b571d69c2ce7c.png#pic_center