為 localStroage 加上過期時間

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

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 。