Vue2（一）

第三方工具

这里是引用

一、axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

二、vue实例与容器

root 是一个容器，下面的创建 vue 实例是为这个容器服务的，并且是一对一唯一识别的

<div id="root">
    <h1>Hello,{{name}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    //创建vue实例
    const vm = new Vue({
        el: '#root', //el指定当前实例为哪个容器服务，通常为选择器
        data() { //函数式
                console.log('@@@', this); //这里的this是Vue实例对象
                return {
                    name: '你好'
                }
            }
        /* data: { //对象式
            name: '你好123'
        }*/
    })
    // x.$mount('#root')
</script>

el 与 data 的两种写法
el 可以换成在实例外写上 x.$mount(’#root’)
（这种方式可以控制什么时候再绑定实例数据，而 el 的方式则是，一开始就绑定上了）
data一般写函数式，但也可以写成对象式

三、js表达式语句整理

1、xxx.toUpperCase() 把xxx输出为大写。
2、在需要折叠的代码前后加上 region 和 endrgion ，就不会出现一旦输入相关就展开折叠。
3、数组.sort(( p1,p2 )=>{ … })，这是数组排序
如果是升序（小到大）（p1-p2），如果是降序（大到小）（p2-p1）。
无参则表示直接升序排序

四、Vue模板语法

//创建vue实例
const vm = new Vue({
    el: '#root', //el指定当前实例为哪个容器服务，通常为选择器
    data: {
        name: '你好123',
        school: {  //多层次结构
            url: 'http://www.baidu.com'
        }

    }
})

创建实例之后，这个容器中的所有方法及属性的增删改查都需要在实例中进行操作

1、插值语法

用两个{}，把代词放进去形成动态数据调用

<div>
	{{name}}
</div>

2、指令语法

形式都是 v-??? 的格式

① v-bind:href=“school.url” =》 v-bind会把""里面的东西当成表达式去执行
    可以简写为 :href:“url”
    是单向绑定
② v-model: =》 v-model是双向绑定，一般运用在表单类，输入类的标签里面，像h2这些标签不能使用

五、数据代理

在每一个 vm 数据中，都存在数据代理，数据代理可以更好的控制数据操作，一般通过以下原理

Object.defineProperty(person, 'age', {
    value: 18,
    enumerable: true, #控制属性是否可以被枚举（遍历）
    writable: true,   #控制属性是否可以被修改
    configurable: true #控制属性是否可以被删除 

    # 当有人读取这里的属性的时候，就会触发 get 函数（getter）
    get() {
        return number;
    },

    # 当有人修改这个属性的时候，就会触发 set 函数（setter）
    set(value) {
        number = value;
    }
})

六、事件

methods 方法区内只有两种调用形式：
① 事件回调（点击或者移动）
② 用插值语法作为 html 内容被解析

事件只要对象一致，就可以使用链式编程的形式连续绑定

1、事件处理

事件的基本使用：
1、使用 v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
2、事件的回调需要配置在 methods对象中，最终会在 vm 上；
3、methods 中配置的函数，不要用箭头函数！否则 this 就不是 vm 了；
4、methods中配置的函数，都是被 Vue 所管理的函数，this 的指向是 vm 或 组件实例对象；
5、@click=“demo” 和@click=“demo($event)” 效果一致，但后者可以传参；

2、事件修饰符

@动作.xxx	意义
prevent	阻止默认事件（常用）
stop	阻止事件冒泡（常用）
once	事件只触发一次（常用）
capture	使用事件的捕获模式
self	只有 event.target 是当前操作的元素时才触发事件
passsive	事件的默认行为立即执行，无需等待事件回调执行完毕

3、Vue中键盘事件

1、键盘中的所有按键的名字都是开头大写的原生单词，还拥有着代表着它的哈希值，例如（Enter,13）
2、但如果遇到名字是两个单词组成的按键的情况下，把两个单词全变成小写，两个单词拆开中间加小横杠，才可以绑定使用。（例如，caps-lock）

别名	意义
enter	回车
delete	删除
esc	退出
space	空格
tab	换行（这个键比较特殊，有切换焦点的功能，不适合keyup，需要用keydown）
up	上
down	下
left	左
right	右

系统修饰键（特殊）：ctrl、alt、shift、meta
（1）配合 keyup：需要配合其他任意按键，才能触发事件
（2）配合keydown：可以正常触发事件

查询按键名字及代表哈希值的方法

methods: {
    showInfo(e) {
        console.log(e.key, e.keyCode);
    }
}

七、计算属性与监视

1、计算属性

1、通过已有属性进行计算获得想要的属性，计算属性会附加在 vm 上，可以直接读取使用。
2、原理：底层借助了object.defineproperty 方法提供 gettter 和 setter 。当需要读取数据或者修改数据时调用。
3、好处：与 methods 实现相比，内部有缓存机制（复用），效率更高。

methods 与 computed 相比

methods 主要用于绑定事件，直接调用方法
computed 主要用于对已有数据进行处理，汇成另一个属性，直接使用

computed 只调用一次的机制

computed: {
    fullname: {
        get() {
            console.log('被调用了');
            return this.firstname + '-' + this.lastname
        },
        set(value) {
            console.log('set', value);
            const arr = value.spilt('-')
            this.firstname = arr[0]
            this.lastname = arr[1]
        }
    }
}

在确保不需要被修改，不需要使用 set() 方法的时候，可以使用简写形式

    fullname() {
        console.log('get被调用了');
        return this.firstname + '-' + this.lastname
    }

2、监视属性

用 watch 监视某一个属性的变化，当变化的时候自动调用 handler

简写形式：如果 watch 中只有 handle r的时候，就可以简写形式
（下面就是简写形式）

方式一：

写在实例内
watch: {
    isHot: {
    'xxx.siHot' 多级结构就需要补上单引号''
    
        immediate: true,  # 当页面刷新的时候，先调用一次
        deep: true,  # 深度监测，加上后，该属性内部的所有层数据都可以监测
        
        handler(newValue, oldValue) {
            console.log('info被修改了', newValue, oldValue);
        }
    }
}

watch: {
    isHot(newValue, oldValue) {
        console.log('info被修改了', newValue, oldValue);
    }
}

方式二：

写在实例外
 vm.$watch('isHot', {
    immediate: true,
    handler(newValue, oldValue) {
        console.log('info被修改了', newValue, oldValue)
    }
})

vm.$watch('isHot', function (newValue, oldValue) {
    console.log('info被修改了', newValue, oldValue);
})

3、computed 和 watch 对比

① 所有 computed 能做到是事情，watch 都可以做到
② watch 能做到的事情，computed 不一定可以做到

所有 vue 为对象的函数都用普通函数
所有不是 vue 为对象的函数，都用箭头函数

八、绑定样式（记得加冒号）

这里的绑定其实是 v-bind:class 的缩写，
在需要为属性绑定数据的时候，除了静态数据的String类型不加冒号，其他都需要加冒号。

1、绑定 class 样式

<body>
    <div id="root">
        <!-- 绑定 class 样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click='changeMood'></div>

        <!-- 绑定 class 样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr"></div>

        <!-- 绑定 class 样式--对象写法，适用于：要绑定的样式个数确定，名字也确定，可以动态决定用不用 -->
        <div class="basic" :class="classObj"></div>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el: '#root',
            data: {
                name: '123',
                mood: 'normal',
                classArr: ['class1', 'class2', 'class3'],
                classObj: {
                    class1: false,
                    class2: true,
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random() * 3)
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>

2、绑定 style 样式

# 常用方式
<div class="basic" :style="styleObj">{{name}}</div>

# 数组写法
<div class="basic" :style="styleArr">{{name}}</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            name: '123',
            mood: 'normal',
            styleObj: {
                fontSize: '40px',
                color: 'red',
            },
            styleArr: {
                styleObj2: {
                    fontSize: '40px',
                    color: 'red',
                },
                styleObj3: {
                    fontSize: '40px',
                    color: 'red',
                },
            }
        },
    })
</script>

九、template

类似于 div 的压缩包，但是在解析的时候，会自动解压
注意：不可以与 v-show 一起使用

十、条件渲染

1、v-if-else-if=""

可以在 div 上绑定 v-if、v-else、v-else-if 三种判断语句。若判断为 true 则对应的 div 显示
（假如判断动作频率很高的， v-if 替换成 v-show 会更好）

1、且 v-if 必须是最开头，中间不允许逻辑打乱

十一、列表渲染

1、v-for（vue 的遍历）

vue 中的 key

以下代码中的 :key 是作为一种标识，一般使用被遍历数据中的 String 或者 number 数据作为标识
当数据发生变化的时候，VUE 会进行新旧虚拟 DOM 差异比较，在进行匹配，此时如果没有唯一标识或者唯一标识，就会引起数据混乱

<div id="root">
    <ul>
        <!-- 遍历数组 -->
        <li v-for="p of persons" :key="p.name">
            {{p.name}}-{{p.age}}
        </li>
    </ul>
    <ul>
        <!-- 遍历对象 -->
        <li v-for="(value,key) of car" :key="key">
            {{key}}-{{value}}
        </li>
    </ul>
    <ul>
        <!-- 遍历字符串 -->
        <li v-for="(char,index) of str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>
    <ul>
        <!-- 遍历指定次数 -->
        <li v-for="(number,index) of num" :key="index">
            {{number}}-{{index}}
        </li>
    </ul>
</div>

......

    const vm = new Vue({
        el: '#root',
        data: {
            persons: [
                { id: '001', name: '张三', age: '18' },
                { id: '002', name: '李四', age: '19' },
                { id: '003', name: '王五', age: '20' },
            ],
            car: {
                name: '兰博基尼',
                price: '920w',
                color: 'black',
            },
            str: 'hello',
            num: "12345"
        },
    })
</script>

2、列表过滤

filter 是个功能强大的过滤器，不断在列表中挑选符合条件的信息汇总成一个新的对象输出
关于 filter 过滤器的全部用法 [点击]

const vm = new Vue({
    el: '#root',
    data: {
        keyWords: '',
        persons: [
            { id: '001', name: '马冬梅', age: 19, sex: '女' },
            { id: '002', name: '周冬雨', age: 20, sex: '女' },
            { id: '003', name: '周杰伦', age: 21, sex: '男' },
            { id: '004', name: '黄科然', age: 22, sex: '女' },
        ]
    },
    computed: {
        fillPerons() {
            const arr = this.persons.filter((p) => {
                return p.name.indexOf(this.keyWord) !== -1
            })
        }
    }
})

3、列表排序

连同上点案例，因为需要在筛选结果中排序，所以写在过滤器中

if (this.sortType) {
    arr.sort((p1, p2) => {
        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
    })
}

sort 函数具体看第三点

十二、Vue监视数据的原理

1、Vue 会监视 data 中所有层次的数据。
2、如何检测对象中的数据
      Vue 通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据。
      对象中后追加的属性，Vue 默认不做响应式处理，如果需要响应式，可以使用如下API：
            ① Vue.set(target,propertyName/index,value)
            ② vm.$set(target,propertyName/index,value)
3、如何检测数组中的数据？
      通过包裹数组更新元素的方法实现，本本质就是做了两件事：
            ① 调用原神对应的方法对数组进行更新；
            ② 重新解析代码，进而更新页面。
4、在 Vue 修改数组中的某个元素一定要用如下方法：
      ① 使用这些API：

1、push()：向数组末尾添加新的元素，并返回新数组的长度
2、pop()：把原数组的最后一个元素移除，并返回被移除的元素
3、shift()：把原数组的第一个元素移除，并返回被移除的元素
4、unshift()：向数组开头添加新的元素，并返回新数组的长度
5、splice((index,number,item1, …, itemX) )：从 index 位置开始往后，删除 number 个项目（若有 item 则在被删除的位置插入 一个或者多个 item）
6、sort(a,b)：排序函数
7、reverse(arr)：颠倒数组的顺序

      ② Vue.set() 或 vm.$set()
数组修改的具体方法（push()、pop()、shift()、unshift()、splice()、sort()、reverse()）

十三、过滤器

定义：对要显示的数据进行特定处理后显示
语法：
      1、注册过滤器：Vue.filter(name,callback) 或 new Vue{filter:{}}
      2、使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
过滤器可以串联使用，也可以有多个参数，而且过滤器结果是生成一个新的数据

<div id="root">
    <h3>{{time | timeFormater}}</h3>
    <h3>{{time | timeFormater('YYYY_MM_DD')}}</h3>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el: '#root',
        data: {
            time: 1621561377603 //随意取的时间戳
        },
        filters: {
        	# 如果有格式则使用格式，无格式则使用条件定义中的格式
            timeFormater(value, str = 'YYYY-MM-DD HH:mm:ss') {
                return dayjs(value).format(str)
            }
        }
    })
</script>

十四、一些指令

1、面试题：v-html指令的安全性问题

v-html 指令：向指定节点中渲染包括 html 结构的内容。可以识别 html
结构内容，替换掉节点的所有内容，{{x}}（插值语法）则不会。
 
注意，使用 v-html 有很高的安全性问题！！
1、容易导致 XSS 攻击。（XSS 是跨站脚本攻击，恶意往 Web 页面插入恶意代码，通过 XSS 来获得用户 Cookie 或其他有用信息，利用平台负责接收并保存这些信息。）
2、一定要可信的或者恒定的内容上使用 v-html ，永远不要用在用户提交的内容上！

1、什么是 XSS 攻击
2、Vue 核心面试问题：v-html 会导致什么问题
3、什么是cookie？

2、v-clock

用处：可以在主模板上加上，用处是可以在网速慢的时候，防止未经解析的模板跑到页面上
特点：在vue还没有介入的时候，像个 class 一样，当vue解析完之后， v-clock 会自动消失

3、v-once

只动态调用一次

4、v-pre

一些不用任何计算，逻辑处理的简单信息节点，可以加上 v-pre 进行跳过编译，直接显示，会加快系统的编译

5、自定义指令

例如，autofocus 在一些浏览器里面不一定执行，这种情况下，我们可以自定义一个指令，供我们自己使用。
① 全局指令：

Vue.directive(指令名，配置对象/回调函数)

② 局部指令：

new Vue({
	directives:{
		指令名：配置对象
	}
})

1）.bind：指令与元素成功绑定时调用。
2）.inserted：指令所在元素被插入页面时调用。
3）.update：指令所在模板结构被重新解析时调用。

命名规则：
1、指令定义时不加 v-，但使用时要加 v- ；
2、指令名如果是多个单词，要使用 kebab-case 命名，不要用 camelClass 命名。

十五、生命周期

完整周期：
数据监测 ==》解析Vue ，存入内存中（虚拟DOM） ==》 搭建DOM结构 ==》把解析好的虚拟DOM对应的替换结构中的部分（此时可以操作 DOM 了，但是一般不建议） ==》调用挂载（mounted(){ ... }） ==》完成（vm 自行销毁，不占内存，除了原生的事件，所有自定义的vue都销毁）

vue可以理解为一个辅助搭建的工人，一切完成后，自动消失。
beforeCreate - create 函数 =》创建
beforeMount - mounted 函数 =》挂载
beforeUpdate - updated 函数 =》更新
beforeDestroy - destroyed 函数 =》销毁

常用的生命周期函数：
1、mounted：发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2、beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。（一般不会在这个过程中操作数据，因为不会触发更新流程）

生命周期又叫回调函数、生命周期函数、生命周期钩子，是 Vue 会在关键时候帮我们调用一些特殊名称的函数，关于生命周期函数的名字不可更改，但函数的具体内容是自己编写的。（其中的 this 指向的是 vm 或 组件实例对象。）

十六、组件

把一个网站的若干个部分按模块区分，例如一个顶部区域用一个组件，组件包括代码（html、css、js）和资源（mp3等）的集合。各个部分有各个组件，维护起来更加高效便捷。

1、单文件组件 与 非单文件组件

单文件组件：一个文件只包含有1个组件
非单文件组件：一个文件中包含有 n 个组件

2、定义组件

使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的那个 options 几乎一样。
区别如下：
      1、el 不要写，因为所有组件都由 vm 管理，由 vm 中的 el 决定服务于哪个容器。
      2、data 必须写成函数形式，因为要避免组件被复用时，数据存在引用关系。
      3、使用 template 配置组件结构。

3、注册组件

全局注册：

Vue.components('组件名',{
	......
})

局部注册：

const vm = new Vue({
    el: '#root',
    components: {
        ......
    }
})

4、使用组件

写在结构内：
<组件名></组件名>

组件命名规则：
一个单词的情况下，首字母大小写都行，多个单词组成的情况下，一般用 kebab-case 命名，在有 Vue 脚手架的情况下，才可以使用 CamelCase 命名

5、组件实际（VueComponent）

简称 Vc 。一个 vm 管理着若干个 vc 。代表着一个个组件。
其中的 this 指向的是 VueComponent 实例对象。
vc 并不是程序员定义的，是 vue.extend 生成的，每一次调用 vue.extend ，都会返回一个新的 vc 。

6、组件嵌套

子组件注册在父组件内，同时写在父组件的结构内。

7、底层逻辑

vc 是属于构造函数，可以调用 demo.prototype 显示原型属性。但是底层逻辑是调用隐式原型属性（demo.__proto__）
Obj =》Vue原型对象 =》vm实例对象原型
                                  =》vc原型对象 =》vc实例对象

十七、vue 组件文件

1、结构

vue文件只认三个标签（快捷键：vue+>）
script 内必须要加暴露：export default{ … }

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

组件书写

2、接收 props

当父组件给子组件传入方法和或者数据之后，需要在子组件写下

简写：
props: ["xxx","xxx"],

需要设定数据类型，就写成如下:
props:{
	xxx:String,
	xxx:Number,
}

3、ref 引用

使用 ref 属性，用来给元素或者子组件注册引用信息（id 的替代者）
应用在html标签上获取的是真实的 DOM 元素，应用在组件标签上是组件实例对象（vc）

标识： <h1 ref="xxx"> ... </h1>
获取：this.$refs.xxx

4、混入

有些组件或者代码，是许多组件共有的部分，就可以把这些拎出来，写在一个 mixin.js（优先级比正常组件中的代码稍低） 文件里面，称之为混入。
局部：

export const mixin = {
	共同的部分（什么东西都行）
}

# 组件里面：
import mixin from 'mixin 文件路径'	// 首先引入这个混入对象
export default {
    mixins:[mixin],		// 然后注册你引入的这个混入对象
}

全局：

import mixin from 'mixin 文件路径'
Vue.mixin(mixin);

5、插件

可以创建一个 plugin.js 文件，里面写下许多附加功能的方法，例如时间戳计算器，过滤器等，形成插件文件。

const xxx={
	install (){
		所有的全局配置，都可以放在插件中
	}
}

引用：
用 import 引入在 main.js 文件中

Vue.use(plugins)  调用

6、scoped

由于样式的共通性，所有样式都视为一个文件
所以加上<style scoped>，使得这个 style 文件变成一个局部样式文件
（App 组件可以不用加）

十八、组件案例实用

1、数据在哪，操作数据的方法就在哪。
2、props适用于接收方法或者数据。
3、使用 v-model 时要切记：v-model 绑定的值不能是 porps 传过来的值，因为 props 是不可以修改的。
4、props传过来的若是对象类型的值，修改对象中的属性时 Vue 不会报错。但不推荐这么做。
5、绑定事件后面都可以考虑直接写函数形式，如果形式简单的话，可以这么做，不传方法。

1、组件化编码流程（通用）

1、实现静态组件：组件按功能点拆分（思路上尽量把各个模块拆分，按区域划分，例如，头身尾），先使用组件实现静态页面效果，命名不要与 html 元素冲突
2、展示动态数据：（考虑好数据的存放位置，数据是一个组件在用（放在自身即可），还是一些组件在用（放在他们共同的父组件上面））
2.1数据的类型、名称是什么？
2.2数据保存在哪个组件？
3、交互——从绑定事件监听开始

2、输入框获取数据的添加做法

① 绑定事件
② 写个方法：=》把输出包装成对象
        1）生成 id(auto) ——用 nanoid()
        2）定义一个 const xxx = { 东西格式都写在这里 }
        3）添加数据：子组件给父组件传数据
           （1）先把总数据给父组件
           （2）子组件接收父组件数据（用了方法就一定要接收）
           （3）父组件写个添加方法，给子组件调用
           （4）子组件接收，写个传参的方法把数据回给父组件

3、删除

① 可以使用提示框组件 confirm("是否删除")
② 同上，在子组件调用方法
③ 原理是，减少被删除的 li ，再重新遍历（filter(e) => {e.id == id}）
        代码意思就是，获取全部的 id 但是不要（!==）当前这个 id ，其他的都过滤出来形成一个新的对象
        1）使用 filter 过滤器生成新对象；
        2）传入的参数 e 代表的是整个 ul；
        3）e.id 指的是所有的 li 的 id；
        4）最后的 id指的是，这个时候获取到的当前操作的 id；

4、统计已勾选

① 需要信息的地方 插值语法 {{xxx}}
② 遍历所有，如果勾选值为 true ，则统计
这里写一个普通的版本，但是更好的使用reduce来进行条件统计
reduce( (pre，current) => { ... }, x)

pre：指的是初始值或者上一次返回的结果
current：指代的是当前的值
…：代表函数，当前数组的长度是多少，就自动调用几次
x：指的是统计的初始值（遍历当前对象）

普通版本：
this.todos forEach(todo) => {
	if(todo.done){
		n++
	}
}
return n

更好的版本：
const x = this.todos.reduce((pre,current)=>{
	return pre + (current.done ? 1 : 0)
},0)
return x

简化：
return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);

5、全选

① 绑定点击
② 点后要获取状态 e.target.checked
③ 操作数据去数据的组件中写入
④ 方法：所有东西遍历，还要获参数

xxx(done) {
  this.数据数组.forEach((传参对象) => {
    传参对象的该属性值done = done;
  });
},

6、全删

与 “3、删除” 相似，不同的是

return !todo.done

全反就是删除全部

7、传参技巧

使用下面用法，无论多少个参数，系统先获取第一个参数 name ，后面无论多少都是一个对象 params 全部拿到

(name,...params)

十九、组件自定义事件

更多适用于子组件给父组件传东西的时候

自定义事件可以不传方法给子组件，只回调事件
demo = “zk”（demo 是事件名字，zk是回调函数的名字）
回调函数要么写在 methods 中，要么用箭头函数，否则 this 的指向会出问题

1、绑定

1、
v-on:zk="xxx" 一个正常方法（子组件不用接收方法）

2、（更灵活，如果想要添加触发效果的时候，需使用这种）
<组件 ref = "组件的 name"> </组件>
this.$ref.组件.（$方法）('zk',this.方法名)

组件上也可以绑定原生的DOM事件，需要使用 native 修饰符

2、触发

xxx() {
	this.$emit("zk", this.name);
},

this 指代的是身上的自定义事件，触发（ ）内的东西
若想只触发一次，可以使用 $once 或者 once 方法

3、解绑

this.$off(["zk", "demo"]);
# 如果是多个方法名字，就写成一个数组形式
# 不传方法就是解绑该对象身上的所有的函数

二十、浏览器数据本地存储

1、存储内容大小一般不大（5MB左右）
2、浏览器通过 window.sessionStorage 和 window.localStorage 属性来实现本地存储机制
3、相关API：
    ① xxxxxStorage.setItem('key', 'value');
    该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    ② xxxxxStorage.getItem('person');
    该方法接受一个键名作为参数，返回键名对应的值。

    ③xxxxxStorage.removeItem('key');
    该方法接受一个键名作为参数，并把该键名从存储中删除。

    ④ xxxxxStorage.clear()
    该方法会清空存储中的所有数据。

4、备注：
    ① SessionStorage 存储的内容会随着浏览器窗口关闭而消失。
    ② LocalStorage 存储的内容，需要手动清除才会消失。
    ③xxxxxStorage.getItem(xxx)如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null
    ④ JSON.parse(null)的结果依然是null。