(编辑:jimmy 日期: 2024/12/24 浏览:2)
今天我们使用本地缓存localStorage来实现页面刷新了,验证码倒计时还是和刷新时一样,而不是清零,其次我们可以使用localStorage去实现用户信息缓存,记住密码等等关于缓存的功能,在这里就简单演示一下验证码功能。
一、功能实现
话不多说,直接上代码
<template> <button @click="getCode()" :disabled="!show"> <span v-show="show">发送验证码</span> <span v-show="!show" class="count">{{count}} s</span> </button> </template>
<script> let TIME_COUNT = 60; // 设置一个全局的倒计时的时间 export default { data() { return { show: true, count: '', timer: null, } }, components: { marquee }, created(){ // 进入页面时获取倒计时中止的位置,并继续计时 if (localStorage.regtime > 0 && localStorage.regtime <= TIME_COUNT){ TIME_COUNT = localStorage.regtime; this.count = TIME_COUNT; this.show = false; this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count-- localStorage.regtime = this.count; } else { this.show = true; clearInterval(this.timer); this.timer = null } }, 1000) } }, methods: { getCode () { // 验证码倒计时 if (!this.timer) { this.count = TIME_COUNT localStorage.regtime = this.count; this.show = false this.timer = setInterval(() => { if (this.count > 0 && this.count <= TIME_COUNT) { this.count-- localStorage.regtime = this.count; } else { this.show = true clearInterval(this.timer) this.timer = null } }, 1000) } } } </script>
二、知识拓展
1.对比cookies,sessionStorage 和 localStorage 三大缓存的主要区别
1)存储大小
2)有效时间
3)数据与服务器之间的交互方式
4)适合场景使用
当然只是说谁更适合,存在即合理,别和我杠。
2.localStorage写法
localStorage.getItem("code")//或localStorage.code或localStorage["code"],获取code localStorage.setItem("code","A")//或localStorage.code="A"或localStorage["code"]="A",存储code localStorage.removeItem("code")//存储的持久数据不清除是不会丢失的,清除code localStorage.clear(); //清除本地全部localStorage缓存
总结