Vue.js框架--封装localStorage组件实现保存的历史记录来完善todolist（八）

主要操作技能：

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)进行选择

扫描二维码关注公众号，回复： 3175656 查看本文章

3)右键|重新加载，就会刷新哦！

4）使用了localStorage本地存储，那么就是刷新也不会恢复的!

Vue.js框架--封装localStorage组件实现保存的历史记录来完善todolist（八）

猜你喜欢