杰网资源 Design By www.escxy.com
今天我们使用本地缓存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)存储大小
- cookie数据大小不能超过4k。
- sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2)有效时间
- localStorage:存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
- sessionStorage:数据在当前浏览器窗口关闭后自动删除。
- cookie:设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，
3)数据与服务器之间的交互方式
- cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。
- sessionStorage仅在本地保存，只能在同一标签下共享。
- localStorage仅在本地保存，同一浏览器，标签页全部共享。
4)适合场景使用
- localStorage:适合用于用户离开不清除的数据，如记住密码。
- sessionStorage:适合用于做一些用户离开时及清除的数据，如用户信息。
- cookie:适合用于和服务器交互的数据，如用户发起请求的唯一凭证。
当然只是说谁更适合，存在即合理，别和我杠。
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缓存
总结
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
暂无评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。