localStorage設(shè)置有效期和過期時(shí)間的簡(jiǎn)單方法
前言
總所周知localStorage默認(rèn)是不會(huì)過期的,也沒有可設(shè)置過期的api,如果要實(shí)現(xiàn)過期清除就需要自己實(shí)現(xiàn)一個(gè)api
實(shí)現(xiàn)思路
在Storage原型上新增兩個(gè)方法setCanExpireLocal,getCanExpireLocal,分別用于設(shè)置和獲取值
實(shí)現(xiàn)過期功能至少需要三個(gè)時(shí)間,存值時(shí)間,取值時(shí)間,有效時(shí)間
存取時(shí)間戳都是在函數(shù)被調(diào)用時(shí)在函數(shù)內(nèi)通過Date.now()生成
有效時(shí)間在存值的時(shí)候傳入
如果存值時(shí)間戳加上有效時(shí)間小于當(dāng)前時(shí)間戳說明還沒過期,就返回該值
反之就過期了,刪除該值并返回null
實(shí)現(xiàn)代碼
// 存值函數(shù) // 接收三個(gè)參數(shù):鍵、值、有效天數(shù) Storage.prototype.setCanExpireLocal = (key, value, expire) => { // 判斷傳入的有效期是否為數(shù)值或有效 // isNaN是js的內(nèi)置函數(shù),用于判斷一個(gè)值是否為NaN(非數(shù)值), // 非數(shù)值返回true,數(shù)值返回false // 還可以限制一下有效期為整數(shù),這里就不做了 if (isNaN(expire) || expire < 1) { throw new Error('有效期應(yīng)為一個(gè)有效數(shù)值') } // 86_400_000一天時(shí)間的毫秒數(shù),_是數(shù)值分隔符 let time = expire * 86_400_000 let obj = { data: value, //存儲(chǔ)值 time: Date.now(), //存值時(shí)間戳 expire: time, //過期時(shí)間 } // 注意,localStorage不能直接存儲(chǔ)對(duì)象類型,sessionStorage也一樣 // 需要先用JSON.stringify()將其轉(zhuǎn)換成字符串,取值時(shí)再通過JSON.parse()轉(zhuǎn)換回來 localStorage.setItem(key, JSON.stringify(obj)) } // 取值函數(shù) // 接收一個(gè)參數(shù),存值的鍵 Storage.prototype.getCanExpireLocal = key=> { let val = localStorage.getItem(key) // 如果沒有值就直接返回null if (!val) return val // 存的時(shí)候轉(zhuǎn)換成了字符串,現(xiàn)在轉(zhuǎn)回來 val = JSON.parse(val) // 存值時(shí)間戳 + 有效時(shí)間 = 過期時(shí)間戳 // 如果當(dāng)前時(shí)間戳大于過期時(shí)間戳說明過期了,刪除值并返回提示 if (Date.now() > val.time + val.expire) { localStorage.removeItem(key) return '值已失效' } return val.data } // 存值 Storage.prototype.setCanExpireLocal('測(cè)試', '一天后過期', 1) // 取值 Storage.prototype.getCanExpireLocal('測(cè)試')
總結(jié)
到此這篇關(guān)于localStorage設(shè)置有效期和過期時(shí)間的文章就介紹到這了,更多相關(guān)localStorage設(shè)置有效期和過期時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖)
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能(函數(shù)防抖),需要的朋友可以參考下2019-09-09JS實(shí)現(xiàn)獲取鍵盤按下的按鍵并顯示在頁(yè)面上的方法
這篇文章主要介紹了JS實(shí)現(xiàn)獲取鍵盤按下的按鍵并顯示在頁(yè)面上的方法,涉及JavaScript針對(duì)鍵盤事件及頁(yè)面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11javaScript手機(jī)號(hào)碼校驗(yàn)工具類PhoneUtils詳解
這篇文章主要為大家詳細(xì)介紹了javaScript手機(jī)號(hào)碼校驗(yàn)工具類PhoneUtils,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理
這篇文章主要介紹了通過實(shí)例了解JS執(zhí)行上下文運(yùn)行原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載
這篇文章主要介紹了Phaser.js實(shí)現(xiàn)簡(jiǎn)單的跑酷游戲附源碼下載,需要的朋友可以參考下2018-10-10