目录
一、浏览器 webStorage
（一）介绍
（二）LocalStorage
1.存储数据
2.查询/读取数据
3.移除数据
4.清空数据
（三）SessionStorage
二、TodoList 案例使用 storage
三、组件的自定义事件
（一）自定义事件 v-on 写法
（二）ref 写法
（四）解绑自定义事件
1.正常解绑
2.销毁实例
（五）总结
一、浏览器 webStorage
（一）介绍
就是比如我们在购物网站 搜索了某个商品信息，然后退出网页再进入购物网站，会发现搜索栏下面有搜索历史，这个记录就存在我们浏览器的本地存储。
进入开发者模式 然后点击 应用栏 就是 application
Storage 下面有两个存储 一个是 localstorage 本地存储 里面就是我们存东西的网站，就是我们访问网站的域名
值是 key value 的形式
（二）LocalStorage
特点：浏览器关闭数据也不会消失 清除缓存数据会消失，或者手动删除
向浏览器中添加数据 使用 Window 上的方法 localStorage.setItem 设置，里面必须都是字符串
如果给的不是字符串形式 它会默认给我们改成字符串形式
<body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><script>function saveData() {localStorage.setItem('msg', 'hello')}</script>
</body>1.存储数据
要存储对象型的数据 我们用 JSON.stringify 把对象转化成字符串即可
localStorage.setItem('person', JSON.stringify(p))2.查询/读取数据
查询浏览器中数据 使用 Window 上的方法 localStorage.getItem 设即可
如果是对象 再 JSON.parse(得到的字符串) 就能得到原来形式的数据
如果没有该数据 读出的数据是 null
function readData() {console.log(localStorage.getItem('msg')) }3.移除数据
移除浏览器中数据 使用 Window 上的方法 localStorage.removeItem 设即可
function deleteData() {localStorage.removeItem('msg') }4.清空数据
清空浏览器中数据 使用 Window 上的方法 localStorage.clear() 即可
function deleteAllData() {localStorage.clear()}（三）SessionStorage
特点：关闭浏览器时数据清空
api 与上面 localstorage 一致 把名字替换成 sessionStorage 就行
二、TodoList 案例使用 storage
app 更新
<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo" /><MyList:todos="todos":checkTodo="checkTodo":deleteTodo="deleteTodo"/><MyFooter:todos="todos":checkAllTodo="checkAllTodo":clearAllTodo="clearAllTodo"/></div></div></div>
</template>
<script>
import MyHeader from "./components/MyHeader.vue";
import MyFooter from "./components/MyFooter.vue";
import MyList from "./components/MyList.vue";
export default {name: "app",components: {MyHeader,MyFooter,MyList,},data() {return {todos: JSON.parse(localStorage.getItem("todos")) || [],};},methods: {addTodo(todoObj) {this.todos.unshift(todoObj);},checkTodo(id) {this.todos.forEach((todo) => {if (todo.id === id) todo.done = !todo.done;});},deleteTodo(id) {this.todos = this.todos.filter((todo) => {return todo.id !== id;});},checkAllTodo(done) {this.todos.forEach((todo) => {todo.done = done;});},clearAllTodo() {this.todos = this.todos.filter((todo) => {return !todo.done;});},},watch: {todos: {deep: true,handler(value) {localStorage.setItem("todos", JSON.stringify(value));},},},
};
</script><style>
/*base*/
body {background: #fff;
}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;
}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;
}.btn-danger:hover {color: #fff;background-color: #bd362f;
}.btn:focus {outline: none;
}.todo-container {width: 600px;margin: 0 auto;
}
.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;
}
</style>三、组件的自定义事件
是组件间的一种通信方式 适用于 子组件到父组件
原本写法
原本的子组件给父亲组件传东西
就是父亲先传一个函数给儿子 然后儿子调用 父亲就能得到儿子中的参数
（一）自定义事件 v-on 写法
v-on 可以简写成 @
通过绑定一个自定义事件来实现子给父传递数据 名字叫做 hahaha
<MyStudent v-on:hahaha="getStudentName" />在 app 编写调用的函数
getStudentName(name){console.log('demo被调用了',name)}在 Student 中写 hahaha 事件，并返回 this.name
就不用props 接收了 方便一点
this.$emit('hahaha',this.name) 传数据的语法
methods: {sendStudentName(){this.$emit('hahaha',this.name)}},仅触发一次
<MyStudent v-on:hahaha.once="getStudentName" />（二）ref 写法
使用 ref 属性 更好一点 如果涉及到延时 触发的时候 我们可以用 ref
<MyStudent ref="student" />
设置延时三秒才有 hahaha 事件
mounted() {setTimeout(() => {this.$refs.student.$on("hahaha", this.getStudentName);}, 3000);},只触发一次
this.$refs.student.$once("hahaha", this.getStudentName);
（四）解绑自定义事件
1.正常解绑
在谁里面定义的事件 就在谁里面解绑
我们在 MyStudent 里面写一个 解绑函数
解绑一个事件
unbind(){this.$off('hahaha')}解绑多个事件 我们用 一个数组把我们要解绑的 事件名 放进去
unbind(){this.$off(['hahaha','demo'])}解绑所有事件
unbind(){this.$off()}2.销毁实例
如果销毁 vc 实例，里面的自定义事件也同时被销毁，
如果销毁 vm 实例，所有的子组件也同样被销毁，组件里的自定义事件也被销毁
（五）总结
是组件间的一种通信方式
只能子传父
组件上能绑定原生的 dom 事件 但是得用native 修饰
this.$refs.student.$once("hahaha", this.getStudentName);
中的回调函数如果不写在 methods 里面 还能直接写在这句话里面但是 但是必须用箭头函数否则this 指向会出问题， this 指向调用事件的实例 就是 Student 不是我们要的 this 指向
![[lesson48]同名覆盖引发的问题](http://pic.xiahunao.cn/[lesson48]同名覆盖引发的问题)
