Vue09-浏览器本地存储+组件自定义事件
1.浏览器本地存储-WebStorage
- 浏览器存储内容一般支持在5M左右，不同的浏览器可能不同。
- 浏览器通过window.localStorage和window.sessionStorage实现本地存储。
- 关于localStorage和sessionStorage的相关API。
setItem(key, value); // 将数据保存到浏览器，如果数据已经被保存了就会进行更新。
getItem(key); // 获取保存的数据。
removeItem(key); // 删除保存的数据。
clear(); // 清空保存的数据。
- localStorage和sessionStorage区别。sessionStorage存储的内容会随着浏览器窗口的关闭而消失；localStorage存储的内容需要手动清除才会消失。
2.浏览器本地存储-localStorage
<body>
<!--
localStorage被清除的情况。
1 通过localStorage的removeItem()和clear()清除。
2 用户手动清除Cookie。
-->
<h2>localStorage</h2>
<button onclick="saveData()">保存数据</button>
<button onclick="readData()">读取数据</button>
<button onclick="deleteData()">删除数据</button>
<button onclick="clearData()">清空数据</button>
<script>
function saveData() {
// 通过window.localStorage将数据保存到浏览器中，setItem的两个参数都是字符串类型。
window.localStorage.setItem('name', 'tom');
// 保存一个数字，会转换为字符串然后保存。
window.localStorage.setItem('n', 11); // 11
let p = {name: 'bob', age: '20'};
// 如果保存的value是一个对象，则会调用对象的toString()方法，
// 所以我们可以使用JSON.stringify()将对象转换为字符后保存。
window.localStorage.setItem('p1', p); // [object Object]
localStorage.setItem('p2', JSON.stringify(p)); // {"name":"bob","age":"20"}
}
function readData() {
console.log(localStorage.getItem('name')); // tom
// 读取数据后返回一个字符串。
const result = localStorage.getItem('p2');
// 可以通过JSON.parse()，将字符串转换为对象。
console.log(JSON.parse(result)); // {name: 'bob', age: '20'}
// 当读取一个不存在的数据时返回null
console.log(localStorage.getItem('address')); // null
// JSON.parse()会将null转换为null。
console.log(JSON.parse(null)); // null
}
function deleteData() {
// 删除数据
localStorage.removeItem('n');
}
function clearData() {
// 清空数据
localStorage.clear();
}
</script>
</body>
3.浏览器本地存储-sessionStorage
<body>
<!--
sessionStorage，浏览器关闭重新打开后，sessionStorage中的值就会被清除。
-->
<h2>sessionStorage</h2>
<button onclick="saveData()">保存数据</button>
<button onclick="readData()">读取数据</button>
<button onclick="deleteData()">删除数据</button>
<button onclick="clearData()">清空数据</button>
<script>
function saveData() {
let p = {name: 'bob', age: '20'};
// 如果保存的value是一个对象，则会调用对象的toString()方法，
// 所以可以使用JSON.stringify()将对象转换为字符后保存。
window.sessionStorage.setItem('p1', p); // [object Object]
sessionStorage.setItem('p2', JSON.stringify(p)); // {"name":"bob","age":"20"}
}
function readData() {
const result = sessionStorage.getItem('p2');
// 可以通过JSON.parse()，将字符串转换为对象。
console.log(JSON.parse(result)); // {name: 'bob', age: '20'}
}
function deleteData() {
// 删除数据
sessionStorage.removeItem('n');
}
function clearData() {
// 清空数据
sessionStorage.clear();
}
</script>
</body>
4.TodoList案例添加浏览器本地存储
- 首次访问时从localStorage中读取数据，当todos中的数据被修改时将修改后的数据保存到localStorage中。
- 添加本地存储只涉及App.vue组件的修改。
<template>
... 省略没有变化的代码。
</template>
<script>
export default {
name: "App",
data() {
return {
// 从浏览器本地存储中读取数据。
// 如果读取的内容为null，就将todos的内容设置为空数组[]
todos: JSON.parse(localStorage.getItem('todos')) || []
}
},
// ... 省略没有变化的代码。
// 使用watch深度监视todos。
watch: {
todos: {
// 保存的数据是一个对象，所以使用深度监视，在todo的done数据发生变化时也将其保存到浏览器。
deep: true,
handler(value) {
// 对象发生改变，将数据保存到浏览器。
localStorage.setItem('todos', JSON.stringify(value));
}
}
},
components: {
MyHeader,
MyList,
MyFooter
}
}
</script>
<style>
... 省略没有变化的代码。
</style>
5.组件自定义事件
- 组件自定义事件是一种组件之间通信的方式，适用于子组件到父组件之间的通信。
- 自定义组件事件绑定的两种方式。
<!-- 组件自定义事件绑定的方式一 -->
<!-- 给Demo组件绑定get事件，Demo组件触发get事件后调用父组件的test函数。 -->
<Demo @get='test'/>
<Demo v-on:get='test'/>
<!-- 组件自定义事件的绑定方式二 -->
<Demo ref='demo'/>
mounted {
// 通过$ref.demo获取到组件实例对象。
// 然后给组件绑定get事件，并指定触发get事件时执行的回调函数。
this.$refs.demo.$on('get', this.test);
}
- 自定义组件事件只触发一次的两种方式。
<!-- 方式一，使用.once让事件只触发一次。 -->
<Demo @get.once='test'/>
<!-- 方式二，使用$once让事件只触发一次。 -->
this.$refs.demo.$once('get', this.test);
- 子组件中触发事件。
this.$emit('get', '数据'); // 子组件中触发绑定的get事件，并传递数据。
- 事件的解绑。
this.$off('get'); // 解绑get事件。
this.$off(['get1', 'get2']); // 当需要解绑多个事件时，需要将解绑的事件转换为数组传递。
- 组件上绑定原生DOM事件。
<!-- 组件上绑定原生DOM事件需要使用.native，原生事件触发时指定test函数。 -->
<Demo @click.native='test'/>
6.组件自定义事件-解绑事件
- App.vue中绑定事件。
<template>
<div class="app">
<p>{{msg}} <span>{{studentName}}</span> </p>
<!-- 组件自定义事件简写 -->
<Student @getName="sendStudentName" @get="m1" />
<!-- 不能够通过@click="show"给组件绑定原生的事件，因为组件会将@click当做是组件事件，需要通过
Student组件中使用this.$emit('click');触发。
-->
<Student @click="show"></Student>
<!--
可以通过@click.native="show"给组件绑定原生的事件，.native表示原生的组件事件。
-->
<!-- 通过给组件绑定原生的事件，也体现出组件中<template>下应该只有一个根元素，
如果是多个根元素，就不知道事件需要给哪个元素绑定了。
-->
<Student @click.native="show"></Student>
</div>
</template>
<script>
import Student from './components/Student'
import School from "./components/School";
export default {
name: "App",
data() {
return {
msg: 'hello',
studentName: ''
}
},
methods: {
sendStudentName(name) {
console.log('学生名', name);
this.studentName = name;
},
show() {
alert('1234');
}
},
mounted() {
// 当使用refs给组件绑定getName时，需要注意，第二个参数不能是普通函数。
// 第二个参数需要是methods中的函数或者箭头函数。
// this.$refs.student.$on('getName', this.sendStudentName);
// 当给组件绑定getName事件时，如果将第二个参数设置为普通函数，
// this为触发事件的组件事件对象VueComponent，
// 因为遵循原生事件的规则，谁触发了事件this就是谁。
// this不是当前组件实例对象，而是触发事件的组件对象，所以不能通过this.studentName = name;修改当前组件的数据。
// this.$refs.student.$on('getName', function (name) {
// console.log('this -> ', this);
// this.studentName = name;
// });
// 当给组件绑定getName事件时，可以将第二个参数这个为箭头函数，
// 箭头函数中没有的this，所以会向外寻找，所以this为父组件实例对象。
this.$refs.student.$on('getName', (name) => {
console.log('this -> ', this);
this.studentName = name;
});
},
components: {
School,
Student
}
}
</script>
<style>
.app {
background-color: gray;
}
</style>
- Student.vue中解绑事件。
<template>
<div class="student">
<p>学生名 {{name}}</p>
<p>学生地址 {{address}}</p>
<p>{{num}}</p>
<button @click="n++">n++</button>
<button @click="sendName">发送学生名</button>
<button @click="unbind">解绑事件</button>
<button @click="death">消耗组件实例对象</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
msg: '学生信息',
name: 'tom',
address: 'A01',
num: 1
}
},
methods: {
sendName() {
// 触发父组件中的getName事件，并且将name作为参数传递。
this.$emit('getName', this.name);
this.$emit('get');
this.$emit('click');
},
unbind() {
// 解绑一个事件。
//this.$off('getName');
// 解绑多个事件，需要传递数组。
// this.$off(['getName', 'get']);
// 解绑所有的事件。
this.$off();
},
death() {
// 销毁组件实例对象。
// 1 组件实例对象销毁后，绑定的元素js原生事件(@click="n++")依然有用。
// 2 组件实例对象销毁前，会解绑组件绑定的事件，如父组件给子组件绑定的事件。
// 调用this.$destroy();销毁组件实例对象。
this.$destroy();
}
},
}
</script>
<style scoped>
.student {
background-color: red;
padding: 5px;
margin: 3px;
}
</style>
7.TodoList案例添加组件自定义事件
- App.vue。
<template>
<div id="root">
<div class="todo-container">
<div class="todo-wrap">
<!-- 将之前的:addTodo="addTodo"传递函数，修改为组件自定义事件。 -->
<MyHeader @addTodo="addTodo" />
<MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
<!-- 将之前的:checkAllTodo="checkAllTodo" :clearDoneTodo="clearDoneTodo"传递函数修改为组件自定义事件。 -->
<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearDoneTodo="clearDoneTodo" />
</div>
</div>
</div>
</template>
- MyHeader.vue。
<script>
import {nanoid} from 'nanoid'
export default {
name: "MyHeader",
methods: {
add(event) {
if (!event.target.value.trim()) {
return alert('输入不能为空');
}
const todoObj = {id: nanoid(), name: event.target.value, done: false};
// 将之前通过props接受父组件addTodo函数后调用，修改为使用组件自定义事件的调用。
this.$emit('addTodo', todoObj);
event.target.value = '';
}
}
}
</script>
- MyFooter.vue。
<script>
export default {
name: "MyFooter",
methods: {
handlerChange(event) {
this.checkAllTodo(event.target.checked);
},
handlerClear() {
// 将之前通过props接受父组件clearDoneTodo函数后调用，修改为使用组件自定义事件的调用。
this.$emit('clearDoneTodo');
}
},
computed: {
total() {
return this.todos.length;
},
doneTotal() {
return this.todos.reduce((pre, todo) => todo.done ? pre + 1 : pre, 0);
},
isAll: {
get() {
return this.total === this.doneTotal && this.total > 0;
},
set(value) {
// 将之前通过props接受父组件checkAllTodo函数后调用，修改为使用组件自定义事件的调用。
this.$emit('checkAllTodo', value);
}
}
},
props: ['todos']
}
</script>
浙公网安备 33010602011771号