• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程12:结合localstorage本地存储仿todolist功能

    vue开发教程12:结合localstorage本地存储仿todolist功能

    作者: 分类:vue开发 点击: 186 次
    wordpress CMS主题:ssmay主题

      ToDoList网站地址:http://www.todolist.cn/,打开可以直接看效果(如下图)。todolist网站不需要注册就可以使用,我们可以用它来制作简单的待办事项的列表应用,我们输入的数据会存储在我们自己的浏览器的html5本地数据库里。本章,我们就是要通过vue框架来仿制一个简单的todolist功能应用。

      vue开发教程12:结合localstorage本地存储仿todolist功能

      一:在src目录下创建一个model目录;

      二:在model目录创建storage.js文件,代码如下:

       //localstorage本地存储

      var storage = { //设置一个storage对象,用来实现localStorage本地存储

            set(key,value){

                 localStorage.setItem(key,JSON.stringify(value));

            },

            get(key){

                 return JSON.parse(localStorage.getItem(key));

            },

            del(key){

                 localStorage.removeItem(key);

            }

      }

      export default storage;

      此处JSON.stringify()把数据转成JSON格式数据;JSON.parse()把JSON数据转成普通数据。

      importexport 

      ES6模块主要有两个功能:export和import
      export用于对外输出本模块变量的接口(一个文件可以理解为一个模块)
      import用于在一个模块中加载另一个含有export接口的模块。
      也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。

      exportexport default

       1、export与export default均可用于导出常量、函数、文件、模块等
      2、在一个文件或模块中,export、import可以有多个,export default仅有一个
      3、通过export方式导出,在导入时要加{ },export default则不需要

      三:app.vue文件代码:

      <template>

      <ul>

      <input type="text" v-model="msg.title" v-on:keydown="add2($event)">

      <button @click="add()">增加</button>

      <h2>进行中</h2>

      //这里的@change="savalist()":当多选框发生变化时,就执行savalist()把list保存到本地

      <li v-for="(item,key) in list" v-if="!item.checked">

      <input type="checkbox" v-model="item.checked" @change="savalist()" >

      {{item.title}}

      </li>

      <h2>已完成</h2>

      <li v-for="(item,key) in list" v-if="item.checked">

      <input type="checkbox" v-model="item.checked"  @change="savalist()" >

      {{item.title}} -- <button @click="del(key)">删除</button>

      </li>

      </ul>

      </template>

      <script>

      import storage from './model/storage'; //导入storage.js

      //console.log(storage);

      export default {

      data () { //数据方法对象,返回一个对象

      return {

      msg: {   title:'',  checked:false    },      list: [],

      }

      },

      methods:{ //自定义函数对象

      add(){ //点击“增加”按钮时执行

      this.list.push(this.msg); //把输入框内容添加到list数组中

      this.msg={ title:'',checked:false } //恢复msg变量为空

      storage.set('list',this.list); //保存到localStorage本地存储中

      },

      add2(e){ //输入框中按 enter键时执行

      if(e.keyCode==13){

      this.list.push(this.msg);

      this.msg={ title:'',checked:false }

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

      }

      },

      del(key){ //删除

      this.list.splice(key,1) //从list数组中删除1个元素

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

      },

      savalist(){ //再次保存本地存储

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

      }

      },

      mounted(){ //生命周期方法: 即vue页面刷新时执行

      var list = storage.get('list'); //获取localStorage存储里的数据

      if(list){

      this.list=list; //把本地存储数据赋给list数组

      }

      }

      }

      </script>

      <style></style>

      本案例实现:增加数据,多选框发生变化后,数据自动保存到localStorage本地存储中。刷新页面时,数据依然存在。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809246992.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.