為 localStroage 加上過期時間


Posted by backas36 on 2021-11-26

最近開始投履歷求職,除了基本的問答題、概念題、技術提、白板題等,也會參考該公司的考古題,然後有看到這個題目,覺得蠻有意思的,自己就來動手實作一下。

sessionStorage 與 localStorage 最大的不同就是 sessionStorage 分頁或瀏覽器關掉就等同是過期了,就消失了。

localStorage 除非是手動清除,不然就會一直在那裡,預設是沒有過期失效的問題。

那我們該如何實作讓 localStorage 成有過期時間呢?


setItem 的時候,為資訊加上目前的時間與預計到期時間

   const now = new Date()
    const item = {
      value: 'ohmygod',
      expired: now.getTime() + 5
    }
    localStorage.setItem('withExpired', JSON.stringify(item))

這邊我是直接設定五秒後到期,方便驗證是否真的清除,不然會等到天荒地老。

現在我們利用 setTimeout 來實現如果在要取得 localStorage 時,當下時間超過設定的過期時間是否可以成功取得還是已經被清除。

 setTimeout(() => {
      const itemStr = localStorage.getItem('withExpired')
      const item = JSON.parse(itemStr)
      if (new Date().getTime() > item.expired) {
        localStorage.removeItem('withExpired')
        console.log(localStorage.getItem('withExpired')) // null
      }
    }, 6000)

將 setTimeout 設定六秒後執行 callback,callback 裡面的內容大致上是先取得指定key 的 localStorage ,因為拿到的會是字串,所以必須使用 JSON.parse 來轉換成物件以利後續程式執行。

先取得目前當下時間 new Date().getTime() 如果大於 item 的 expired ,也就是設置 localStorage 時的 expired: now.getTime() + 5 ,就是已經過期啦,也會執行 removeItem,所以最後會回傳 null 。


#localstorage #javascript







Related Posts

軟體開發的未來,是大斗內時代?

軟體開發的未來,是大斗內時代?

CH4. 老手看函式:理解函式呼叫

CH4. 老手看函式:理解函式呼叫

React 新手起手式 0 - 開始寫 React 之前

React 新手起手式 0 - 開始寫 React 之前


Comments