vue学习之封装Storage组件本地存储
<template>
<div id="app">
<input type="text" v-model="todo">
<button @click="add">+增加</button>
<hr>
<h2>进行中</h2>
<ul>
<li v-for="(item,index) in list" :key="index" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList">--{{item.title}}------ <button @click="removeData(index)">删除</button>
</li>
</ul>
<h2>已完成</h2>
<ul>
<li v-for="(item,index) in list" :key="index" v-if="item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList">--{{item.title}}------ <button @click="removeData(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
// 引入组件
import storage from './model/storage.js';
//console.log(storage);
export default {
name: 'app',
data () {
return{
todo:'',
list:[]
}
},
methods:{
add(){
//1.获取input输入的值;
//2.把输入的值push到list里面
this.list.push({
title:this.todo,
checked: false
});
//3.增加后清空输入框的值
this.todo='';
storage.set('list',this.list);
},
removeData(index){
this.list.splice(index,1);
storage.set('list',this.list);
},
saveList(){
storage.set('list',this.list);
}
},
mounted(){ //生命周期函数 vue页面刷新就会触发的方法
var list=storage.get('list');
if(list){
this.list=list;
}
}
}
</script>
<style lang="scss">
</style>
组件代码:
//封装操作localStorage本地存储方法
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;