vue短信验证性能优化如何写入localstorage中


Posted in Javascript onApril 25, 2018

平时我们在项目中进行注册等的时候,会经常用到短信验证的功能,但是现在现在很多短信验证都是存在下面几个问题,例如短信验证时间为60s的时候,

1. 当点击完按钮时,倒计时还没到60s过完时,刷新浏览器,验证码按钮又可以重新点击

2.当点击按钮倒计时开始,例如在50s的时候我关闭了浏览器,过了5s后,我在打开,此时时间倒计时的时间应该是45s左右,但是当重新打开浏览器的时候,按钮又可以重新点击了

为了解决上面的两个问题,就需要把时间都写到localstorage里面去,当打开页面的时候,就去localstorage里面去取,我这里就贴上我的解决方法,因为前几天有个vue的项目用到该方法,所以我这里就写个vue的方法出来吧

组件里面的html代码:

<div class="mtui-cell__ft" @click="getCode">
   <button class="mtui-vcode-btn mtui-text-center" v-if="flag">获取短信</button>
   <button class="mtui-vcode-btn mtui-text-center" v-if="!flag">剩余{{second}}s</button>
</div>

重点来啦

在data里面定义几个需要用到的变量:

second: 60,
 flag: true,
 timer: null // 该变量是用来记录定时器的,防止点击的时候触发多个setInterval

获取短信验证的方法:

getCode() {
   let that = this;
   if (that.flag) {
    that.flag = false;
    let interval = window.setInterval(function() {
     that.setStorage(that.second);
     if (that.second-- <= 0) {
      that.second = 60;
      that.flag = true;
      window.clearInterval(interval);
     }
    }, 1000);
   }
  }

写入和读取localstorage:

 setStorage(parm) {
   localStorage.setItem("dalay", parm);
   localStorage.setItem("_time", new Date().getTime());
  },
  getStorage() {
   let localDelay = {};
   localDelay.delay = localStorage.getItem("dalay");
   localDelay.sec = localStorage.getItem("_time");
   return localDelay;
  }

防止页面刷新是验证码失效:

judgeCode() {
   let that = this;
   let localDelay = that.getStorage();
   let secTime = parseInt(
    (new Date().getTime() - localDelay.sec) / 1000
   );
   console.log(localDelay);
   if (secTime > localDelay.delay) {
    that.flag = true;
    console.log("已过期");
   } else {
    that.flag = false;
    let _delay = localDelay.delay - secTime;
    that.second = _delay;
    that.timer = setInterval(function() {
     if (_delay > 1) {
      _delay--;
      that.setStorage(_delay);
      that.second = _delay;
      that.flag = false;
     } else {





 







// 此处赋值时为了让浏览器打开的时候,直接就显示剩余的时间
      that.flag = true;
      window.clearInterval(that.timer);
     }
    }, 1000);
   }
  }

然后在html挂载页面完成后的生命钩子(mounted)中调用judgeCode()方法就能实现该功能了

总结

以上所述是小编给大家介绍的vue短信验证性能优化如何写入localstorage中,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
JavaScript数据类型详解
Apr 01 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
js原生跨域_用script标签的简单实现
Sep 24 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
Move.js入门
Feb 08 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
May 25 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 Javascript
详解Vue.js中.native修饰符
Apr 24 #Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP正则+Snoopy抓取框架实现的抓取淘宝店信誉功能实例
2017/05/17 PHP
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JQuery操作tr和td内容的方法实例
2013/03/06 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
JavaScript的setter与getter方法
2017/11/29 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
微信小程序实现简单购物车功能
2020/12/30 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python实现处理mysql结果输出方式
2020/04/09 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
招商业务员岗位职责
2013/12/16 职场文书
搞笑征婚广告词
2014/03/17 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
第28个世界无烟日活动总结
2015/02/10 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
新课程改革心得体会
2016/01/22 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript
Python+pyaudio实现音频控制示例详解
2022/07/23 Python