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 相关文章推荐
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
sae使用smarty模板的方法
2013/12/17 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
php中chdir()函数用法实例
2014/11/13 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
采用call方式实现js继承
2014/05/20 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
2018/03/29 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
浅谈python函数之作用域(python3.5)
2017/10/27 Python
Python命令行解析模块详解
2018/02/01 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
小区门卫管理制度
2014/01/29 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
防汛工作情况汇报
2014/10/28 职场文书
计划生育工作总结2015
2015/04/03 职场文书
焦点访谈观后感
2015/06/11 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL