vue指令、鼠标键盘事件、computed/methods/watch、js对象
目录
一、Vue简介
什么是数据
1、数据驱动视图
Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。
Vue.js是一款轻量级的、以数据驱动构建web界面的前端JS框架，它在架构设计上采用了MVVM（Model-View-ViewModel）模式，其中ViewModel是Vue.js的核心，它是一个Vue的实例，而这个实例又作用于页面上的某个HTML元素。
其核心在于通过数据驱动界面的更新和展示而非JS中通过操作DOM来改变页面的显示。
上图的DOM Listeners和Data Bindings是数据驱动中实现数据双向绑定的关键，实际的 DOM 封装和输出格式都被抽象为了 Directives 和 Filters; 这也是Vue.js事件驱动的原理所在。
对于View而言，ViewModel中的DOM Listeners工具会帮助我们监听页面上DOM元素的变化，一旦有变化，Model中的数据也会发生改变；
对于Model而言，当我们操纵Model中的数据时，Data Bindings工具会帮助我们更改View中的DOM元素。
此外，页面组件化也是Vue.js的核心，它提供了一种抽象，让我们可以用独立可服用的小组件来构建大型应用。
所以，我们搭建的任何一个界面你可以把其抽象成为一个组件树，充分的去复用它。
2、MVVM架构
Model是每个页面的单独数据，View是每个页面中的HTML结构，VM是调度者；相比于MVC主要做了如下图示的调整：
优缺点
优点：数据驱动，调度均匀；
缺点：不适合大型项目的架构设计。
3、快速体验,类选择[],{}
核心是vm，他是一个Vue实例对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
background-color: blueviolet;
font-size: 20px;
}
.c2{
color: red;
}
</style>
</head>
<body>
<div id="app">
<button v-bind:class="{c1:islive==1}" v-on:click="index(1)">按钮1</button>
<button v-bind:class="{c1:islive==2}" v-on:click="index(2)">按钮2</button>
<button v-bind:class="{c1:islive==3}" v-on:click="index(3)">按钮3</button>
<button v-bind:class="[c2,{c1:islive==4}]" v-on:click="index(4)">按钮4</button>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
islive:1,
c1:"c1",
c2:"c2"
},
methods: {
index(n1) {
this.islive=n1
},
}
})
</script>
</html>
在上面代码中，我们通过new Vue()构建了一个Vue的实例。
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。比如：挂载元素（el）和数据（data），我们可以操纵数据改变视图。
el表示Vue要操作哪一个元素下面的区域，比如：#app则表示操作id为app的元素下面的区域；
data表示Vue实例的数据对象，data的属性能够响应数据的变化；每个 Vue 实例都会代理其 data 对象里所有的属性。
4、开关灯案例
类似页面切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
button{
width: 30px;
line-height: 40px;
float: right;
}
.bGroup{
display: block;
content: '';
clear: both;
}
.box{
width: 100vw;
height: 200px;
}
.blueviolet{
background-color: blueviolet;
}
.yellow{
background-color:yellow;
}
.blue{
background-color:blue;
}
button.active{
background-color: cyan;
}
</style>
</head>
<body>
<div id="app">
<div class="bGroup">
<button :class="{active:isShow==='blueviolet'}" @click="index('blueviolet')">紫</button>
<button :class="{active:isShow==='yellow'}" @click="index('yellow')">黄</button>
<button :class="{active:isShow==='blue'}" @click="index('blue')">蓝</button>
</div>
<div>
<div v-if="isShow==='blueviolet'" class="box blueviolet"></div>
<div v-else-if="isShow==='yellow'" class="box yellow"></div>
<div v-else class="box blue"></div>
</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow:'blueviolet'
},
methods:{
index(n1){
this.isShow = n1
}
}
})
</script>
</html>
5、留言板案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
[v-cloak] {
display: none;
}
li:hover{
color: red;
}
</style>
</head>
<body>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="index">留言</button>
</form>
<ul>
<li v-for="(info,index) in info_list" v-cloak @click="delInfo(index)">{{info}}</li>
</ul>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
info: '',
info_list: localStorage.info_list ? JSON.parse(localStorage.info_list) :[], // 三元表达， 条件？结果1:结果2
},
methods: {
index() {
if (this.info.length != 0) {
//留言
this.info_list.push(this.info)
//清空输入框
this.info = ''
// 数据持久化（同步到前端数据库）
localStorage.info_list = JSON.stringify(this.info_list)
}
},
delInfo(index){
//删除
this.info_list.splice(index,1)
//删除同步数据库
localStorage.info_list = JSON.stringify(this.info_list)
}
}
})
</script>
</html>
二、Vue指令
2.0 属性指令事件指令简写
1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @
2.1 v-once 指令 只渲染一次
执行一次性地插值，当数据改变时，插值处的内容不会更新。
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
<li v-for="i in list" v-once>{{i}}</li>
</ul>
参考：
2.2 v-if，v-else-if,v-else 条件指令
条件指令，原理喝python中一样，if,else if, else，逻辑只走一个
v-if
v-else-if
v-else
上代码：
<div id="app">
<div>
<p v-show="isShow">show控制显隐</p>
<p v-if="isShow">if控制显隐</p>
</div>
<div>
<p v-if="0">你是第1个p</p>
<p v-else-if="0">你是第2个p</p>
<p v-else>你是第3个p</p>
</div>
</div>
new Vue({
el: '#app',
data: {
isShow: false,
}
})
前端展示结果：你是第3个p
2.3 v-show和v-if的隐藏指令区别
1）语法：v-show="bool值" | v-if="bool值"
2）两者的区别：
v-show：
1.在隐藏标签时，采用display:none渲染标签，标签通过css隐藏。在前端检查还是能看见
2.简单的CSS切换，更高的初始渲染消耗
3.如果频繁使用，推荐使用
v-if：
1.在隐藏标签时，不会渲染在页面上。通过注释的方式，前端检查看不见。
2.更高的切换消耗
3.如果需要安全度，推荐使用
v-show 也是条件渲染指令，不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。和v-if指令不同点在于：v-show是根据表达式之真假值，切换元素的 display CSS 属性，当条件变化时该指令触发过渡效果。
2.4 v-cloak 斗篷指令
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 `[v-cloak] { display: none }` 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
案例代码：
<style type="text/css">
[v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
{{ msg }}
// 如果没有斗篷指令隐藏属性，代码加载到这里num对应的值还没有加载出来，而当下面的num加载出来的时候，屏幕就会出现闪一下
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "message"
}
})
</script>
<!-- 避免页面闪烁-->
2.5 v-bind 属性指令
动态地绑定标签中的一个或多个属性，或一个组件 prop 到表达式。v-bind指令可以在其名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML元素的特性（attribute），比如：
v-bind:src="imageSrc" 可以缩写： :src="imgaeSrc"
:class="{ red: isRed }" 或 :class="[classA, classB]" ...
:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...
绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"
语法结构：v-bind:argument="expression"
<!-- a是变量，值就是类名 | b就是类名，不是变量 | c是变量，值为布尔，决定b类是否起作用 -->
<p v-bind:class="[a, {b: c}]"></p>
因为 Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令，Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
语法糖为冒号（：）
2.6 v-on 事件指令
动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
常用的修饰符包括：
- .stop - 调用 event.stopPropagation()；停止冒泡。
- .prevent - 调用 event.preventDefault(); 停止监听原生事件。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .once - 触发一次。
2.7 v-model 表单指令
v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用
value属性和input事件； - checkbox 和 radio 使用
checked属性和change事件； - select 字段将
value作为 prop 并将change作为事件。
2.8 v-for 循环指令
基于数据渲染一个列表，类似于JS中的遍历。其数据类型是可迭代类型。和python中for循环一样
* 1）语法：v-for="ele in obj" obj是被遍历的对象，ele是遍历得到的每一次结果
* 2）遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
* 字符串：v-for="v in str" | v-for="(v, i) in str"
* 数组：v-for="v in arr" | v-for="(v, i) in arr"
* 对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
上代码：
<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊属性 key 来提供一个排序提示：
<div v-for="item in items" :key="item.id">
{{ item.text }}
</div>
遍历字符串：
第一个参数：e 代表值
第二个参数：i 代表索引
<p>
<i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
</p>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
遍历数组：
第一个参数：e 代表值
第二个参数：i 代表索引
<p>
<i v-for="e in d3">【{{ e }}】</i>
</p>
<p>
<i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
</p>
new Vue({
el: '#app',
data: {
d1: 5,
d2: 'abc',
d3: [1, 3, 5],
d4: {
name: "Bob",
age: 17.5,
gender: "男"
}
}
})
遍历字典对象：
第个参数：e 代表值
第二个参数：k 代表key
第三个参数：i 代表索引
<p>
<i v-for="e in d4">【{{ e }}】</i>
</p>
<p>
<i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
</p>
<p>
<i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
</p>
2.9 v-text 文本指令
v-text：向标签中注入文本，且会替换掉元素之前的内容。；
类似innerText。
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>
2.10 v-html 指令
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<div v-html="html"></div>
参考：数据绑定语法 - 插值
通过v-html会把文本解析成html文本，有样式的话，会直接出来样式。
类似JavaScript中的innerHTML。
使用手法：
> <!-- 方法处理器 -->
>
> <button v-on:click="doThis"></button>
>
> <!-- 内联语句 -->
>
> <button v-on:click="doThat('hello', $event)"></button>
>
> <!-- 缩写 -->
>
> <button @click="doThis"></button>
>
> <!-- 停止冒泡 -->
>
> <button @click.stop="doThis"></button>
>
> <!-- 阻止默认行为 -->
>
> <button @click.prevent="doThis"></button>
>
> <!-- 阻止默认行为，没有表达式 -->
>
> <form @submit.prevent></form>
>
> <!-- 串联修饰符 -->
>
> <button @click.stop.prevent="doThis"></button>
>
> <!-- 键修饰符，键别名 -->
>
> <input @keyup.enter="onEnter">
>
> <!-- 键修饰符，键代码 -->
>
> <input @keyup.13="onEnter">
>
> <!-- the click event will be triggered at most once -->
>
> <button v-on:click.once="doThis"></button>
语法糖为（@）
2.11 样式绑定
两种方式绑定属性：
1. 通过class绑定
2. 通过style绑定
**总结：**
**通过对象绑定时，是样式value**
**通过数组绑定时，是样式key**
**为什么会这样？数据返回的是一个对象，针对数组内的每个值通过key获取真正的value，并绑定到class上。**
**凡是希望外界控制的，都要做成属性，灵活改变，组件也就活了。**
**通过:atrr进行绑定的属性，后面不是字符串了，而是JavaScript表达式了<div :class="oneClass">样式类可以是字符串</div>，oneClass不是字符串，而是oneClass的值。**
2.12 key 绑定
<ul>
<li v-for="item in items" :key="item.id">...</li>
</u>
当show变化的时候，vue会判断页面上是否有同样元素可以复用。上面例子如果我们在用户名input框里面输入了内容，再将show切换为false的时候，你会发现input框里面内容没有变化。
原因就是vue进行了元素复用。
例如：
<transition>
<span :key="text">{{ text }}</span>
</transition>
当 text 发生改变时，<span> 总是会被替换而不是被修改，因此会触发过渡。
注意：key尽量不要使用index，使用数据的id或其他字段，效率更高。
可以使用第三方插件：shortid
npm i shortid --save
三、JS补充内容,元组的增删改
splice增删改万能方法
splice:是做删除 插入 替换用的
let arr = [1, 2, 3];
// 参数：开始索引，操作长度，操作的结果们，splice函数可以完成增删改插所有功能
arr.splice(1, 2);
1:删除的功能
splice(index,count)
参数:
index:开始位置的索引
count:要删除元素的个数
返回:返回的是包含被删除元素的数组对象
2:插入功能
splice(index,0,插入的项)
参数
index:插入元素的索引值
3:替换功能
splice(index,num,value)
index:开始的索引位置
num:删除项的数(如果num为0，就是插入功能)
value:插入的值
返回:返回的是包含被删除的元素的数组对象
1、 数组的7个方法
pop：删除最后一个元素
push：插入到数组尾部
shift：删除数组的第一个元素
unshift：插入到数组的头部
splice：删除元素
sort：数组排序
reverse：数组翻转
2、数组和对象的遍历
v-for="(item,index) in list"
v-for="(value,key,index) in object"
3、改变数组或对象内容的方法
使用数组的方法：vm.list.splice(index,1,{id:'111',name:'xq'})立马生效
改变数组引用的方法：vm.list = [{id:1,name:'qq'},{id:2,name:'qx'}]立马生效
通过Vue.set方法：vue.set(vm.list,index,{id:3,name:'qy'})立马生效
通过vm.$set方法：vm.$set(vm.list,index,{id:3,name:'qy'})立马生效
直接修改对象内容：vm.object.name='qqq'，注意，新增一个{key:value}在页面上是不起作用的，他不会重新渲染。
改变对象引用的方法：vm.object={name:'qqq',age:23} 立马生效
通过Vue.set方法：vue.set(object,sex,'male'),立马生效
通过vm.$set（object,sex,'male'）立马生效
4、vue中的属性
<counter counter="0"></counter> //属性前面不加冒号，0为字符串
<counter :counter="0"></counter> //属性面前加冒号，0为数字，因为他解析js的表达式
5、前台数据库
"""
// 存
// 持久化化存储，永远保存
localStorage.name = "Bob";
// 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
sessionStorage.name = "Tom";
// 取
console.log(localStorage.name);
console.log(sessionStorage.name);
// 清空
localStorage.clear();
sessionStorage.clear();
// 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""
案例：留言板
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
<div id="app">
<form>
<input type="text" v-model="info">
<button type="button" @click="sendInfo">留言</button>
</form>
<ul>
<li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{ info }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
info: '',
// 三目运算符： 条件 ? 结果1 : 结果2
info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
},
methods: {
sendInfo () {
// 完成留言：将info添加到info_arr
// 增 push unshift | 删 pop shift
if (this.info) {
// 留言
this.info_arr.push(this.info);
// 清空输入框
this.info = '';
// 前台数据持久化(缓存)
localStorage.info_arr = JSON.stringify(this.info_arr);
}
},
deleteInfo(index) {
// 删
this.info_arr.splice(index, 1);
// 同步给数据库
localStorage.info_arr = JSON.stringify(this.info_arr);
}
}
})
</script>
四、鼠标事件
@click="click" ////单击
@mousedown="down" ////按下
@mouseup="up" ////抬起
@dblclick="dblclick" ////双击
@mousemove="move" ////移动
@mouseleave="out" ////离开
@mouseout ="out" ////移出
@mouseenter="enter" ////进入
@mouseover="enter" ////在
五、键盘事件
@keydown（键盘按下时触发），
@keypress(键盘按住时触发)，
@keyup(键盘弹起)
获取按键的键码 e.keyCode
@keyup.13 按回车键
@keyup.enter 回车
@keyup.up 上键
@keyup.down 下键
@keyup.left 左键
@keyup.right 右键
@keyup.delete 删除键
六、JS对象补充
1.普通对象与对象简写
// 1）js没有字典类型，只有对象类型，对象可以完全替代字典来使用
// 2）js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
// 3）对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
// 4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}
var dic_obj = {
// 属性：值（数值，函数）
'name': 'Bob',
'eat': function () {
console.log('在吃饭')
}
};
console.log(dic_obj.name, dic_obj['name']);
dic_obj.eat(); dic_obj['eat']();
// 属性省略引号，方法简写
var obj = {
name: 'Tom',
eat () {
console.log('在吃饭...')
}
};
console.log(obj.name, obj['name']);
obj.eat(); obj['eat']()
// 属性变量简写
var height = 180;
var p = {
height,
name: 'Jerry',
eat() {}
};
console.log(p.name, p.height);
2.第一种类（了解）
// 第一种声明类的方法
class People {
constructor (name) {
this.name = name
}
eat () {
console.log(this.name + '在吃饭')
}
}
let p1 = new People('Bob');
let p2 = new People('Tom');
console.log(p1.name, p2.name);
p1.eat();
第二种类（了解）
// 第二种声明类的方法(难点)：在函数内部出现了this语法，该函数就是类，否则就是普通函数
function Teacher(name) {
this.name = name;
this.eat =function () {
console.log(this.name + '在吃饭')
}
}
let t1 = new Teacher('Owen');
t1.eat();
类属性
// 类属性：给类属性赋值，所有对象都能访问
function Fn() {}
let f1 = new Fn();
let f2 = new Fn();
// 赋值类属性
Fn.prototype.num = 100;
console.log(f1.num);
console.log(f2.num);
// 类似于单例
Vue.prototype.num = 1000;
let v1 = new Vue();
let v2 = new Vue();
console.log(v1.num);
console.log(v2.num);
js函数补充
// 1）函数的形参与调用时传入的实参关系（你传你的，我收我的）
// 传入和接受的参数个数不需要一致
// 但是一定按位进行赋值（没有关键字参数）
// 没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined
function fn1(a, b) {
console.log(a, b);
return a + b;
}
let res = fn1(10, 20, 30);
console.log(res);
// 2）函数定义的演变
let fn2 = function (a, b) {
return a + b;
};
// 省略关键字的箭头函数
let fn3 = (a, b) => {
return a + b;
};
// 没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也省略
let fn4 = (a, b) => a + b;
console.log(fn4(11, 22));
// 如果形参只有一个时，声明参数的()也可以省略
let fn5 = num => num * num;
console.log(fn5(3));
// 弱语言
console.log(10 + '5');
console.log(10 - '5');
console.log(+'55555');
七、computed和methods和watch
computed：计算属性，可以完成各种复杂的逻辑。具有缓存功能
methods：也可以写逻辑，写函数方法。
watch：监听，当监听的值发送改变，就执行任务。
监听到一个物品价格的改变，会导致总价的改变，就会重新计算一次
computed和methods区别？
computed中自带监听机制，时时更新
methods中只有页面加载的时候执行一次
案例：computed计算器
<div id="app">
<!-- type="number"表示只能写数字 -->
<input type="number" v-model="num1" max="100" min="0">
+
<input type="number" v-model="num2" max="100" min="0">
=
<button>{{ sum }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
// sum: '', // 重复声明
num1: '',
num2: '',
},
computed: {
sum () {
// num1和num2都在该方法属性中，所以有一个更新值，该方法都会被调用
if (this.num1 && this.num2) {
return +this.num1 + +this.num2; // +this.num1是将字符串快速转换澄数字
}
return '结果';
}
}
})
</script>
案例：watch姓名拆分
<div id="app">
姓名：<input type="text" v-model="full_name">
<hr>
姓：<button>{{ first_name }}</button>
名：<button>{{ last_name }}</button>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知'
},
watch: {
full_name () {
if (this.full_name) {
this.first_name = this.full_name.split('')[0];
this.last_name = this.full_name.split('')[1];
} else {
this.first_name = '未知';
this.last_name = '未知';
}
}
}
})
</script>
八、Local Storage和Session Storage
前端的两个数据库：
js语法：
永久持久化数据：存
localStorage.name = "jeff"
临时持久化数据：（页面关闭，重新打开，数据消失）
sessionStorage.name = "tom"
取：
console.log(localStorage.name)
console.log(sessionStorage.name)
清空数据：
localStorage.clear()
sessionStorage.clear()
短板：只能存字符串，如果要存对象和数据需要转换为json字符串再进行存
选择了IT，必定终身学习
