localStorage設置有效期和過期時間的簡單方法

Posted on by

前言

總所周知localStorage默認是不會過期的，也沒有可設置過期的api，如果要實現過期清除就需要自己實現一個api

實現思路

在Storage原型上新增兩個方法setCanExpireLocal，getCanExpireLocal，分別用於設置和獲取值

實現過期功能至少需要三個時間，存值時間，取值時間，有效時間

存取時間戳都是在函數被調用時在函數內通過Date.now()生成

有效時間在存值的時候傳入

如果存值時間戳加上有效時間小於當前時間戳說明還沒過期，就返回該值

反之就過期瞭，刪除該值並返回null

實現代碼

	// 存值函數
	// 接收三個參數：鍵、值、有效天數
  Storage.prototype.setCanExpireLocal = (key, value, expire) => {
  		// 判斷傳入的有效期是否為數值或有效
  		// isNaN是js的內置函數，用於判斷一個值是否為NaN（非數值），
  		// 非數值返回true，數值返回false
  		// 還可以限制一下有效期為整數，這裡就不做瞭
            if (isNaN(expire) || expire < 1) {
              throw new Error('有效期應為一個有效數值')
            }
            // 86_400_000一天時間的毫秒數，_是數值分隔符
            let time = expire * 86_400_000
            let obj = {
                  data: value, //存儲值
                  time: Date.now(), //存值時間戳
                  expire: time, //過期時間
            }
            // 註意，localStorage不能直接存儲對象類型，sessionStorage也一樣
            // 需要先用JSON.stringify()將其轉換成字符串，取值時再通過JSON.parse()轉換回來
            localStorage.setItem(key, JSON.stringify(obj))
  }

	// 取值函數
	// 接收一個參數，存值的鍵										
Storage.prototype.getCanExpireLocal = key=> {
    let val = localStorage.getItem(key)
    // 如果沒有值就直接返回null
    if (!val)  return val
    // 存的時候轉換成瞭字符串，現在轉回來
    val = JSON.parse(val)
    // 存值時間戳 +  有效時間 = 過期時間戳
    // 如果當前時間戳大於過期時間戳說明過期瞭，刪除值並返回提示
    if (Date.now() > val.time + val.expire) {
      localStorage.removeItem(key)
      return '值已失效'
    }
    return val.data
  }
      // 存值
  Storage.prototype.setCanExpireLocal('測試', '一天後過期', 1)
       // 取值
  Storage.prototype.getCanExpireLocal('測試')

總結

到此這篇關於localStorage設置有效期和過期時間的文章就介紹到這瞭,更多相關localStorage設置有效期和過期時間內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：