localStorage本地存储设置有效期的简单方法

在实际开发中，经常遇到需要存储数据的情况，通常我们会选择localStorage进行存储，但是localStorage的存储是永久的，而很多时候我们需要将存储的数据设置一个有效期，下面是自行设置有效期的具体实现：

<template>
  <div>
    <el-form label-width="80px" :model="form">
      <el-form-item label="名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="活动区域">
        <el-input v-model="form.region" />
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input v-model="form.type" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      form: {}
    }
  },
  watch: {
    // 这里监听对象属性值的改变需要用深度监听，否则无法监听到对象属性值的变化
    form: {
      handler(newVal) {
        if (newVal) {
          // 存储数据
          this.setItem('formData', newVal, new Date().getTime() + 10000)
        }
      },
      deep: true
    }
  },
  created() {
    // 页面初始化获取存储数据
    this.form = this.getItem('formData')
  },
  methods: {
    // 设置缓存方法，可提取为公共方法
    setItem(key, value, expires) {
      const obj = {
        value, // 需要缓存的数据
        expires // 缓存有效期，毫秒为单位
      }
      localStorage.setItem(key, JSON.stringify(obj))
    },
    // 获取缓存方法，可提取为公共方法
    getItem(key) {
      const value = localStorage.getItem(key)
      if (!value) return {}
      const obj = JSON.parse(value)
      if (obj['expires'] && new Date().getTime() > obj['expires']) {
        // 如果设置了有效期，且已过期，直接清楚
        localStorage.removeItem(key)
        return {}
      }
      // 未设置有效期或设置了有效期但没有过期，直接将存储的数据返回
      return obj.value
    }
  }
}
</script>