vue数据本地储存

就这一个页面+连数据我都写了能有一周了,可累死老娘了,啊啊啊啊
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

就是这样一个页面
1.要实现的就是点击新增提交之后,数据上传到数据库,后台返回数据本地储存,显示在页面
2.填写表单之后,点击新增返回主页面填写的表单保留数据

解决思路
1.要实现的就是点击新增提交之后,数据上传到数据库,后台返回数据本地储存,显示在页面
要实现这个问题需要在新增页面中点击提交走后台的接口,后台接口给我返回提交数据(第一次见这种返回,后台大哥想的解决方案)。之后我将数据使用
localStorage.setItem(变量名,JSON.stringify(保存的变量));来保存数据。

注意:localStorage.setItem保存字符串的时候可以第二个参数直接传入保存数据localStorage.setItem(变量名,保存的变量),但是在保存数组和对象的时候需要使用JSON.stringify。
在这里插入图片描述
1.是判断进入查看页面还是修改页面,状态由上一个页面带入
2.调用接口,反显查看/编辑信息
3.先获取存储的数据,判断存储数据是否存在,否则报错。
4.将修改的数据存放进obj中,如果存在就将obj压入数组中,重新存储数组,更新数据。如果不存在,就设置数组为空,压入obj添加数据

但是此时我又遇到了一个问题:最开始想的是我需要把数据保存到本地,然后在大页面显示,但是我的三个table(财务信息,科技能力,知识产权)需要有查看、编辑、删除。查看、编辑都需要反显信息,我当时的想法是把我保存的信息反显到查看、编辑中。但是localStorage有一个问题就是附件信息没法保存,数据缺失。所以我陷入了绝望,好在后台写了查询语句,我直接调用就ok了,这个问题over。

2填写表单之后,点击新增返回主页面填写的表单保留数据
新增数据搞定后,就开始弄大页面数据保存本的,以便于从新增页面返回之后依旧保存填写过的数据。我开始想的是在data设置一个空的对象form,每个input加上一个改变值的点击事件,将点击事件改变的值存到form中,但是我发现,如果数据填好已经保存,但是当我填好最后一个input的时候,从新增页面跳转回来的时候只有最新的input有数值。这是因为只更新了最新input框的数值,我天真了,我以为是像对象一个一个保存的呢。

后来我发现我的脑子瓦特了,我直接把ruleform的数值放进去存储不就好了嘛。删除数据也需要删除中间数组数值,再重新存储。
在这里插入图片描述
无论点击哪个新增按钮都存储表单信息
在这里插入图片描述
初始化页面的时候获取表单,先判断这个对象是否存在
在这里插入图片描述将页面中table删除的数据移除,重新赋值存储信息。

接下来我发现在我调用这个大页面的需要传十五个参数的这个接口竟然不好使。一开始我以为是参数多传或少传,后来发现是因为用localStorage存储文件没有完整的存入,所以附件没传上。于是我不得不用vuex。但是这个原来项目的框架vuex有点迷,一开始我添加了方法怎么都获取不到,后来我发现这个框架自己建了一个getters.js文件对state状态进行抛出。
在这里插入图片描述
在这里插入图片描述
getter.js对store的moudles进行抛出,让我们可以获得这个页面,于是我就写了fileInfo.js文件
在这里插入图片描述
接下来就是存储文件和提取文件了
在这里插入图片描述
存储文件dispatch(action的路径,存储的变量)
在这里插入图片描述
初始化页面获取文件数据,fileList是显示在页面上的,如果有存储内容则赋值,没有置空。
最后就是提交和重置之后都要清空这些存储,之后就over了。

vuex还是不会,有空得琢磨一下子。

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3中,你可以使用浏览器提供的本地存储机制来存储数据。常用的本地存储方式包括localStorage和sessionStorage。 localStorage是一种持久化的本地存储方式,存储的数据会一直保存在浏览器中,直到被手动清除或过期。你可以使用`localStorage.setItem(key, value)`方法来存储数据,使用`localStorage.getItem(key)`方法来获取数据,使用`localStorage.removeItem(key)`方法来删除指定的数据。 sessionStorage是一种会话级别的本地存储方式,存储的数据会在浏览器会话结束后被清除。你可以使用`sessionStorage.setItem(key, value)`方法来存储数据,使用`sessionStorage.getItem(key)`方法来获取数据,使用`sessionStorage.removeItem(key)`方法来删除指定的数据。 在Vue 3中,你可以在组件的生命周期钩子函数中使用这些方法来实现数据的本地存储。例如,在created钩子函数中可以使用`localStorage.setItem(key, value)`方法来存储数据,mounted钩子函数中可以使用`localStorage.getItem(key)`方法来获取数据。 需要注意的是,localStorage和sessionStorage只能存储字符串类型的数据,如果需要存储对象,可以使用JSON.stringify()方法将对象序列化为字符串进行存储,使用JSON.parse()方法将字符串反序列化为对象进行读取。 另外,如果你想在Vue组件之间共享数据,也可以考虑使用Vuex状态管理库或Vue的provide/inject特性来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值