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

心已赠人 2024-02-18 23:26 11阅读 0赞

**主要操作技能：**

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>

![70][]

//封装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;

**效果：**

![70 1][]

2)进行选择

![70 2][]

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

![70 3][]

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

![70 4][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4950133a3c1447fda08a935d34909158.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/c50723015b8e458cb78f5cf0705255cc.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/9ba1981a66274c4ca9c7cba11c26013b.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/513b84e4ec0a430db279c33c48133e10.png
[70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/db39b7f2cd3840feaee383cad2a771d4.png