localStorage如何設(shè)置有效期和過期時(shí)間

這篇文章將為大家詳細(xì)講解有關(guān)localStorage如何設(shè)置有效期和過期時(shí)間，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

實(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('測試', '一天后過期', 1)
       // 取值
  Storage.prototype.getCanExpireLocal('測試')

關(guān)于“l(fā)ocalStorage如何設(shè)置有效期和過期時(shí)間”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。