【重要】前端本地緩存：封裝localStorage支持設置過期時間、命名空間

      - 當選中項目后，每隔5秒緩存一次當前頁面所填內容

      - 緩存至localStorage中，過期時間為7日，到期后自動刪除當前項目的緩存，namespace為【visitPlanList】

      - 中途退出軟件時，下次進入新增頁，選中之前的項目，會回顯對應的內容

      - 如果手動點擊【放棄】按鈕，並確認退出，那么會根據當前選中的項目id，刪除對應的緩存

      - 新增提交時，以本次提交時的項目id為依據，將visitPlanList中對應的緩存刪除

      - 緩存僅針對新增，編輯時不操作緩存，具體代碼見@/views/Application/VisitManage/Plan/Add/index.vue

 

1、utils/index.js中定義myLocalStorage ，支持設置、獲取、刪除

// 拜訪管理-前端緩存 namespace：命名空間，visitPlanList=拜訪計划  visitFeedbackList=拜訪反饋
export const myLocalStorage = {
  set(namespace = 'visitPlanList', key, data, time) {
    const storage = JSON.parse(localStorage.getItem(namespace)) || {}
    storage[key] = {
      data,
      createTime: Date.now(),
      lifeTime: time || 1000 * 60 * 60 * 24 * 7 // 默認設置過期時間：7天
    }
    localStorage.setItem(namespace, JSON.stringify(storage))
  },
  get(namespace = 'visitPlanList', key) {
    const storage = JSON.parse(localStorage.getItem(namespace)) || {}
    if (!storage[key]) return
    const { data, createTime, lifeTime } = storage[key]
    // 當前時間 - 存入時間 > 過期時間
    if (Date.now() - createTime > lifeTime) {
      delete storage[key]
      localStorage.setItem(namespace, JSON.stringify(storage))
      return null
    } else {
      return data
    }
  },
  delete(namespace = 'visitPlanList', key) {
    const storage = JSON.parse(localStorage.getItem(namespace)) || {}
    if (!storage[key]) return
    delete storage[key]
    localStorage.setItem(namespace, JSON.stringify(storage))
  }
}

2、頁面使用

import { myLocalStorage } from '@/utils'

    // 存儲緩存數據
    setStorage() {
      if (this.id) return
      const timer = setInterval(() => {
        const page1Data = this.$refs.page1Ref.page1Data
        if (page1Data.projectId <= 0) return
        const params = { page1Data, page2Data: this.page2Data }
        myLocalStorage.set('visitPlanList', page1Data.projectId, params)
      }, 5000)
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer)
      })
    },
    // 獲取緩存數據
    getStorage(projectId) {
      if (this.id) return
      const params = myLocalStorage.get('visitPlanList', projectId)
      if (!params) return
      this.$refs.page1Ref.page1Data = params.page1Data
      this.page2Data = params.page2Data
    },
    // 刪除緩存數據
    deleteStorage() {
      if (this.id) return
      const projectId = this.$refs.page1Ref.page1Data.projectId
      const params = myLocalStorage.get('visitPlanList', projectId)
      if (params) myLocalStorage.delete('visitPlanList', projectId)
    }

 

存儲的數據結構：