效果:
1编写封装storage.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使用
<template> <div> <input type="text" v-model="todo" @keydown="doAdd($event)"/> <br> <hr> <h2>进行中</h2> <ul> <li v-for="(item,key) in list" v-if="!item.checked"> <input type="checkbox" v-model="item.checked" @change="saveList()"/>{{item.title}}-- <button @click="removeData(key)">删除</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="saveList()"/>{{item.title}}-- <button @click="removeData(key)">删除</button> </li> </ul> </div> </template> <script> import storage from './storage.js' // console.log(storage); export default { name: "List", data() { return { todo: '', list: [ { title: '录制nodejs', checked: true }, { title: '录制ionic', checked: false } ] } }, methods: { doAdd(e) { console.info(e.keyCode) if (e.keyCode == 13) {//回车键 this.list.push({ title: this.todo, checked: false }); this.todo = ''; // localStorage.setItem('list', JSON.stringify(this.list)) storage.set('list',this.list) } }, removeData(key) { this.list.splice(key, 1); // localStorage.setItem('list', JSON.stringify(this.list)) storage.set('list',this.list) }, saveList() { // localStorage.setItem('list', JSON.stringify(this.list)) storage.set('list',this.list) }, }, mounted() { // let list = JSON.parse(localStorage.getItem('list')) let list = storage.get('list'); if (list) { this.list = list; } }, } </script> <style scoped> </style>