Web缓存-localStorage

最新推荐文章于 2024-07-08 16:52:24 发布

置顶一Ⅱ彡

最新推荐文章于 2024-07-08 16:52:24 发布

阅读量290

点赞数

分类专栏： vue JS 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/qq_36972185/article/details/115069622

版权

JS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

该博客介绍了一个工具类，用于在浏览器的localStorage中存储key/value对，特别应用于表单数据的缓存。当用户在新增或更新设备信息的表单操作中意外退出时，如果操作类型为'add'，未提交的数据会被存储；当提交或组件销毁时，会清除存储的表单数据。localStorage提供setItem、getItem和removeItem方法，用于数据的存取和删除，数据类型仅支持字符串。

摘要由CSDN通过智能技术生成

工具类

const storage = {
  set(key, value) {
    localStorage.setItem(key, value)
  },
  get(key) {
    return localStorage.getItem(key)
  },
  remove(key) {
    localStorage.removeItem(key)
  }
}
export default storage

应用

新增表单意外退出时，缓存表单数据

  mounted () {
    if(this.$route.query.operationType === "add") {
      const device_info = storage.get("device_info") || ''
      if (device_info !== '') {
        this.formData = JSON.parse(device_info)
      }
    }
    if(this.$route.query.operationType === "update") {
      ......
    }
  },
  destroyed () {
    if(this.$route.query.operationType === "add") {
      if(!this.submitFlag){
        storage.set("device_info", JSON.stringify(this.formData))
      }
    }
  },
  
  onSubmit () {
      this.submitFlag = true
      storage.remove("device_info")
  },