localStorage設(shè)置有效期和過(guò)期時(shí)間的簡(jiǎn)單方法
前言
總所周知localStorage默認(rèn)是不會(huì)過(guò)期的,也沒(méi)有可設(shè)置過(guò)期的api,如果要實(shí)現(xiàn)過(guò)期清除就需要自己實(shí)現(xiàn)一個(gè)api
實(shí)現(xiàn)思路
在Storage原型上新增兩個(gè)方法setCanExpireLocal,getCanExpireLocal,分別用于設(shè)置和獲取值
實(shí)現(xiàn)過(guò)期功能至少需要三個(gè)時(shí)間,存值時(shí)間,取值時(shí)間,有效時(shí)間
存取時(shí)間戳都是在函數(shù)被調(diào)用時(shí)在函數(shù)內(nèi)通過(guò)Date.now()生成
有效時(shí)間在存值的時(shí)候傳入
如果存值時(shí)間戳加上有效時(shí)間小于當(dāng)前時(shí)間戳說(shuō)明還沒(méi)過(guò)期,就返回該值
反之就過(guò)期了,刪除該值并返回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, //過(guò)期時(shí)間
}
// 注意,localStorage不能直接存儲(chǔ)對(duì)象類型,sessionStorage也一樣
// 需要先用JSON.stringify()將其轉(zhuǎn)換成字符串,取值時(shí)再通過(guò)JSON.parse()轉(zhuǎn)換回來(lái)
localStorage.setItem(key, JSON.stringify(obj))
}
// 取值函數(shù)
// 接收一個(gè)參數(shù),存值的鍵
Storage.prototype.getCanExpireLocal = key=> {
let val = localStorage.getItem(key)
// 如果沒(méi)有值就直接返回null
if (!val) return val
// 存的時(shí)候轉(zhuǎn)換成了字符串,現(xiàn)在轉(zhuǎn)回來(lái)
val = JSON.parse(val)
// 存值時(shí)間戳 + 有效時(shí)間 = 過(guò)期時(shí)間戳
// 如果當(dāng)前時(shí)間戳大于過(guò)期時(shí)間戳說(shuō)明過(guò)期了,刪除值并返回提示
if (Date.now() > val.time + val.expire) {
localStorage.removeItem(key)
return '值已失效'
}
return val.data
}
// 存值
Storage.prototype.setCanExpireLocal('測(cè)試', '一天后過(guò)期', 1)
// 取值
Storage.prototype.getCanExpireLocal('測(cè)試')總結(jié)
到此這篇關(guān)于localStorage設(shè)置有效期和過(guò)期時(shí)間的文章就介紹到這了,更多相關(guān)localStorage設(shè)置有效期和過(guò)期時(shí)間內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁(yè)效果實(shí)例詳解
KnockoutJS是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架。接下來(lái)通過(guò)本文給大家介紹Bootstrap與KnockoutJs相結(jié)合實(shí)現(xiàn)分頁(yè)效果,對(duì)bootstrap knockoutjs相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-05-05
一些常用的JS功能函數(shù)(2009-06-04更新)
將 ClientMentInfo類改成了兼容IE6,IE7,IE8,Vista,Windows 7和Firefox2009-06-06
JavaScript極簡(jiǎn)入門教程(二):對(duì)象和函數(shù)
這篇文章主要介紹了JavaScript極簡(jiǎn)入門教程(二):對(duì)象和函數(shù),本文講解了對(duì)象基礎(chǔ)知識(shí)、函數(shù)基礎(chǔ)知識(shí)、函數(shù)調(diào)用、異常、繼承等內(nèi)容,需要的朋友可以參考下2014-10-10
URL的參數(shù)中有加號(hào)傳值變?yōu)榭崭竦膯?wèn)題(URL特殊字符)
今天在調(diào)試客戶端向服務(wù)器傳遞參數(shù)時(shí),參數(shù)中的“+”全部變成了空格,原因是URL中默認(rèn)的將“+”號(hào)轉(zhuǎn)義了,經(jīng)過(guò)以下步驟解決了,需要的朋友可以參考一下2016-11-11
詳解js中構(gòu)造流程圖的核心技術(shù)JsPlumb(2)
這篇文章主要介紹了js中構(gòu)造流程圖的核心技術(shù)JsPlumb,jsPlumb是一個(gè)強(qiáng)大的JavaScript連線庫(kù),它可以將html中的元素用箭頭、曲線、直線等連接起來(lái),適用于開(kāi)發(fā)Web上的圖表、建模工具等,需要的朋友可以參考下2015-12-12
完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問(wèn)題
下面小編就為大家?guī)?lái)一篇完美解決IE9瀏覽器出現(xiàn)的對(duì)象未定義問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧,祝大家游戲愉快哦2016-09-09
微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)精確的日期時(shí)間選擇器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01

