vue将数据存储在本地_vue实战开发习惯打卡.添加本地存储

学习要点：1.添加习惯 2.本地存储

本节课我们来开始学习第二个微实战，习惯打卡中添加习惯然后本地存储。

一．添加习惯

1. 给 input 文本框添加回车事件，并添加 v-model 双向绑定；

type="text" @keyup.enter="addHabit" v-model="title">

2. 在 data 数据设置字符串 title 和数组 habits，以及 url 字符串；

data() {  return {      title:'', /*习惯标题*/      url:'', /*习惯图标*/      habits:[], /*习惯数据*/  }}

3. 图片采用 01-15 的命名格式，通过随机来自动获取，但个位数要补全；

/*数据图标*/getImgName(){    //随机1-15随机数    const name=Math.floor(Math.random() * 15 + 1);    //补零    if(name < 10){        return '0' + name;    }    return name;},

4. 在 methods 方法里添加创建一条习惯的方法 addHabits；

/*添加数据*/ addHabit(){    //时间搓    const time=Date.now();       //创建习惯数据    const habit={        //ID时间搓        id:time,        //随机图标        url:'url(img/'+this.getImgName()+'.svg)',        //习惯标题        titile:this.title,        //打卡统计        count:0,        //今天日期        today:''    };    this.habits.unshift(habit);    //更新本地存储数据    this.setLocalHabit();    //清空输入框    this.title='';}

5. 写入本地存储的方法如下：

// 本地缓存setLocalHabit(){    localStorage.setItem('habits',JSON.stringify(this.habits));}

6. 运行调试

如果您觉得有用，记得在下方点赞、关注、留言，小编会定期奉上更多的惊喜哦，您的打赏支持才是小编继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术，陪有梦想的人一起成长！