今天我們使用本地緩存localStorage來(lái)實(shí)現(xiàn)頁(yè)面刷新了，驗(yàn)證碼倒計(jì)時(shí)還是和刷新時(shí)一樣，而不是清零，其次我們可以使用localStorage去實(shí)現(xiàn)用戶信息緩存，記住密碼等等關(guān)于緩存的功能，在這里就簡(jiǎn)單演示一下驗(yàn)證碼功能。

一、功能實(shí)現(xiàn)

話不多說(shuō)，直接上代碼

<template><button @click='getCode()' :disabled='!show'> <span v-show='show'>發(fā)送驗(yàn)證碼</span> <span v-show='!show' class='count'>{{count}} s</span> </button></template>

<script> let TIME_COUNT = 60; // 設(shè)置一個(gè)全局的倒計(jì)時(shí)的時(shí)間 export default { data() { return { show: true, count: ’’, timer: null, } }, components: { marquee }, created(){ // 進(jìn)入頁(yè)面時(shí)獲取倒計(jì)時(shí)中止的位置，并繼續(xù)計(jì)時(shí) 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 () { // 驗(yàn)證碼倒計(jì)時(shí) 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>

二、知識(shí)拓展

1.對(duì)比cookies，sessionStorage 和 localStorage 三大緩存的主要區(qū)別

1)存儲(chǔ)大小

cookie數(shù)據(jù)大小不能超過(guò)4k。 sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大。

2)有效時(shí)間

localStorage:存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)； sessionStorage:數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除。 cookie:設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或?yàn)g覽器關(guān)閉，

3)數(shù)據(jù)與服務(wù)器之間的交互方式

cookie的數(shù)據(jù)會(huì)自動(dòng)的傳遞到服務(wù)器，服務(wù)器端也可以寫cookie到客戶端。 sessionStorage僅在本地保存，只能在同一標(biāo)簽下共享。 localStorage僅在本地保存，同一瀏覽器，標(biāo)簽頁(yè)全部共享。

4)適合場(chǎng)景使用

localStorage:適合用于用戶離開不清除的數(shù)據(jù)，如記住密碼。 sessionStorage:適合用于做一些用戶離開時(shí)及清除的數(shù)據(jù)，如用戶信息。 cookie:適合用于和服務(wù)器交互的數(shù)據(jù)，如用戶發(fā)起請(qǐng)求的唯一憑證。

當(dāng)然只是說(shuō)誰(shuí)更適合，存在即合理，別和我杠。

2.localStorage寫法

localStorage.getItem('code')//或localStorage.code或localStorage['code']，獲取codelocalStorage.setItem('code','A')//或localStorage.code='A'或localStorage['code']='A'，存儲(chǔ)codelocalStorage.removeItem('code')//存儲(chǔ)的持久數(shù)據(jù)不清除是不會(huì)丟失的，清除codelocalStorage.clear(); //清除本地全部localStorage緩存

總結(jié)

到此這篇關(guān)于Vue利用localStorage本地緩存使頁(yè)面刷新驗(yàn)證碼不清零的文章就介紹到這了,更多相關(guān)Vue頁(yè)面刷新驗(yàn)證碼不清零內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！