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