当前位置: 首页 > article >正文

前端对页面数据进行缓存

页面录入信息,退出且未提交状态下,前端对页面数据进行存储

前端做缓存,一般放在local、session和cookies里面,但是都有大小限制,如果页面东西多,比如有上传的图片、视频,浏览器会抛出一个QuotaExceededError错误。所以最后采用了vuex进行存储
思路:进入页面时,会请求接口获取数据,判断该条数据是否在vuex里面进行存储,如果有,将vuex中的值赋值给form,如果没有,将接口返回的值赋值给form。提交时,在vuex中清楚该数据。点击返回按钮时,在生命周期钩子beforeDestory中对页面数据进行存储
arrList:this.$store.state.cachedData //vuex 缓存的页面数据
form:{} // 页面v-model的数据
id:当前页面数据的唯一标识
 import { mapState, mapMutations } from "vuex";  


 computed: {
    ...mapState(["cachedData"]),
  },
methods:{
    ...mapMutations(["setCachedData"])
}
  beforeDestroy() {
    //有多条数据,根据唯一标识id进行存取和清除
    let dataToCache = {
      id: this.id,
      data: JSON.stringify(this.form),
    };
    const index = this.arrList.findIndex(
      (item) => item.id == this.id
    );
    if (index != -1) {
      this.arrList[index] = dataToCache;
    } else {
      this.arrList.push(dataToCache);
    }
    this.setCachedData(this.arrList);
  },
mounted(){
    this.getPageDate()
},
methods:{
    getPageDate(){
            //都接口,获取当前页面数据,判断缓存中是否有该条数据
           const index = this.arrList.findIndex(
              (item) => item.id == this.id
            );
            if (index !== -1) {
              this.form = JSON.parse(
                this.$store.state.cachedData[index].data
              );
            } else {
                this.form = res.data.list
              }

    },
    submit(){
          //走接口,提交成功时,进行清除
           const index = this.arrList.findIndex(
                (item) => item.id == this.id
              );
            this.arrList.splice(index, 1);
            this.setCachedData(this.arrList);
    }
}


http://www.kler.cn/a/450942.html

相关文章:

  • Doris Tablet 损坏如何应对?能恢复数据吗?
  • 灵当CRM getMyAmbassador Sql注入漏洞复现(附脚本)
  • Unity3D用正则判断身份证号或邮箱
  • 高强度螺栓等级划分
  • UE5 渲染管线 学习笔记
  • 由于这些关键原因,我总是手边有一台虚拟机
  • SQL 实战:窗口函数的妙用 – 分析排名与分组聚合
  • 07-01-指针与数组
  • OneCode:开启高效编程新时代——企业定制出码手册
  • component-后端返回图片(数据)前端进行复制到剪切板
  • 008 Qt_显示类控件_QLabel
  • 【es6复习笔记】集合Set(13)
  • MongoDB 更新文档
  • Mac M1使用pip3安装报错
  • C++软件设计模式之装饰器模式
  • 创建仓颉编程语言的第一个项目
  • 【2024】Merry Christmas!一起用Rust绘制一颗圣诞树吧
  • GAMES101:现代计算机图形学入门-笔记-11
  • 数据结构与算法Python版 散列与区块链
  • 前端常用算法集合
  • HTTP—01
  • MQTT协议在树莓派上的安全性和性能测试及其在物联网应用中的应用
  • 【网络云计算】2024第52周-每日【2024/12/24】小测-理论实操-解析
  • docker 安装minio
  • SpringBoot的Thymeleaf做一个可自定义合并td的pdf表格
  • LeetCode33题:搜索旋转排序数组(原创)