LocalStorage设置有时效的缓存

1.创建tools.js

tools.js
// 设置缓存
const BASE_URL = 'baseUrl'
// 有效时间
const TIME_OUT = 1 * 60 * 1000 // 1分钟失效
// 存时
export const setUrlStorage = (url) => {
  localStorage.setItem(BASE_URL, JSON.stringify({
    url,
    time: Date.now(),
  }))
}

// 取时
export const getUrlStorage = () => {
  try {
    const baseUrlObj = localStorage.getItem(BASE_URL)
    const { url, time } = JSON.parse(baseUrlObj)
    if (Date.now() - time > TIME_OUT) {
      return null
    }
    return url
  } catch (error) {
    return null
  }
}

2.使用

   test.vue
      <van-button type='primary' size="large" @click='setStorages'>设置缓存</van-button>
      <van-button type='primary' size="large" @click='getStorages'>获取缓存</van-button>
      <script>
        import { setUrlStorage, getUrlStorage } from '@/utils/tools'
        export default {
        
            methods:{
                //设置缓存
                setStorages () {
                     setUrlStorage('https://www.baidu.com')
                },
                //取缓存
                getStorages () {
                    const storage = getUrlStorage() ?? 'https://jd.com'
                    console.log(storage)
                }
             
            }
        }
      </script>