vue本地缓存localStorage将多次添加的表单数据存为数组格式

本文介绍如何在Vue应用中利用localStorage存储和读取表单数据数组,避免因相同key值导致的数据覆盖问题,实现数据的有效管理和复用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue本地缓存localStorage将多次添加的表单数据存为数组格式

要把表单数据存成数组形式,在另一个页面通过v-for渲染展示,因为拥有同一个key值,在每次更新表单数据时都会发生数据覆盖现象。

   var templist = JSON.parse(localStorage.getItem("msgBody") || "[]");
      templist.push(this.msgBody);
      localStorage.setItem("msgBody", JSON.stringify(templist));

大概思路就是先取再存,先把上次存入的一组数据取出来,将本次新增的的表单数据放入,再存。this.msgBody是我放当前表单各项数值的地方。"msgBody"是key的名字这个随意取

取得时候

 var items = JSON.parse(localStorage.getItem("msgBody"));

利用key值就拿到数组啦在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值