版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/82219235
主要操作技能:
1.生命周期函数 vue页面刷新就会触发的方法 mounted{}
2.封装localStorage组件
3.使用模块化, 导入引用 import storage from './model/storage.js'
编写代码:
<template>
<div id="app">
<!-- 键盘按下回车键添加数据哦!-->
<input type="text" v-model="todo" @keydown="doAdd($event)" placeholder="添加todo.." />
<hr /><br /><br />
<h2>正在进行</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="saveData()" />{{item.title}} --
<button @click="doDel(key)">del</button>
</li>
</ul>
<h2>已经完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model="item.checked" @change="saveData()" />{{item.title}} --
<button @click="doDel(key)">del</button>
</li>
</ul>
</div>
</template>
<script>
import storage from './model/storage.js' //导入js文件
// console.log(storage);
export default {
name: 'app',
data() { //业务逻辑的数据
return {
ok: false, //标记true/false
msg: 'hello',
todo: '',
list: []
}
},
methods: {
doAdd(e) {
//console.log(e);
if(e.keyCode == 13) {
this.list.push({
title: this.todo,
checked: false
});
}
//JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串
//保存列表数据
// localStorage.setItem('list', JSON.stringify(this.list));
//用封装
storage.set('list', this.list);
},
doDel(key) {
this.list.splice(key, 1); //删除
//保存删除的数据
// localStorage.setItem('list',JSON.stringify(this.list));
//用封装
storage.set('list', this.list);
},
saveData() { //保存改变的哦!
//localStorage.setItem('list',JSON.stringify(this.list));
//用封装
storage.set('list', this.list);
}
},
mounted() { //生命周期函数 vue页面刷新就会触发的方法
//获取数据
// var list = JSON.parse(localStorage.getItem('list'));
//用封装
var list = storage.get('list');
//判断
if(list) {
this.list = list;
}
}
}
</script>
<style lang="scss">
</style>
//封装localStorage本地存储方法 模块化的文件
//node.js基础
var storage = {
set(key, value) { //保持数据
localStorage.setItem(key, JSON.stringify(value));
},
get(key) { //获得数据
return JSON.parse(localStorage.getItem(key));
},
remove(key){ //移除数据
localStorage.removeItem(key);
}
}
export default storage;
效果:
2)进行选择
3)右键|重新加载,就会刷新哦!
4)使用了localStorage本地存储,那么就是刷新也不会恢复的!