个人练习----Vue 封装操作localstorage 本地存储的方法【如有不对，欢迎指正】

// 封装操作localstorage 本地存储的方法，这是模块化的文件，

var storage = {
set(key,value){ // 调用这个方法时候传入一个 key 和 value
//  将传入的 value 转换成JSON 字符串
localStorage.setItem(key,JSON.stringify(value))
},
get(key){  // get 方法 直接传入 key 就行
// 反序列化，将 JSON 字符串转换成 JSON 对象
return JSON.parse(localStorage.getItem(key))
},
remove(){  //  删除
localStorage.removeItem(key)
}
}
export default storage   //  将 storage 暴露出去

然后在组件中引用

import storage from './model/storage.js'

然后在组件中使用

storage.set('list',this.list);

storage.get('list')

代码

<template>
<div id="app">
<div>
<input type="text" name="" id="" v-model="todo">
<button @click="add()">增加</button>
<h2>进行中</h2>
<ul>
<li v-for="(item, key) in list" :key="key" v-if="!item.checked">
<input type="checkbox" name="" id="" v-model="item.checked"  @change="add2()">
{{ item.title }}<button @click="removeData(key)">删除</button>
</li>
</ul>
<h2>已完成</h2>
<ul>
<li v-for="(item, key) in list" :key="key" v-if="item.checked">
<input type="checkbox" name="" id="" v-model="item.checked"  @change="add2()">
{{ item.title }}<button @click="removeData(key)">删除</button>
</li>
</ul>
</div>
</div>
</template>

<script>
import storage from './model/storage.js'export default {
data(){
return{
todo:'',
list:[
{title:'进行中',checked:true},
{title:'已完成',checked:false}
]
}
},
methods:{
add(){
this.list.push({
title:this.todo,
checked:false
});
this.todo = '';
//localStorage.setItem('key',JSON.stringify(this.list));
storage.set('list',this.list)
},
removeData(key){
this.list.splice(key,1);
//localStorage.setItem('key',JSON.stringify(this.list));
storage.set('list',this.list)
},
add2(){
//localStorage.setItem('key',JSON.stringify(this.list));
storage.set('list',this.list)
}
},
mounted() {
//var list = JSON.parse(localStorage.getItem('key'));
var list = storage.get('list');
if (list) {
this.list = list
}
//console.log(this.list)
},
}
</script>