首页 > 其他分享 >Vue localStorage 将数据存为数组

Vue localStorage 将数据存为数组

时间:2023-10-26 15:12:01浏览次数:34  
标签:Vue msgBody 表单 JSON localStorage 数组 数据

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值就可以拿到数组

标签:Vue,msgBody,表单,JSON,localStorage,数组,数据
From: https://www.cnblogs.com/nuomibaibai/p/17789453.html

相关文章

  • vue学习笔记之执行顺序
       vue文件加载顺序:index.html>app.vue>main.js     加载顺序详情:执行index.html(index.html中id为app的div标签是一个挂载点,之后我们的Vue根实例就会挂载到该挂载点上)执行main.jsmain.js找到实例挂载app.vue文件,将index.html的挂载的内容显示出来(用app.vue的template......
  • Java中 List和数组之间的常见转换方法
    List转数组1、使用for循环//要转换的list集合List<String>list=newArrayList<>();list.add("aa");list.add("bb");list.add("cc");//初始化需要得到的数组String[]array=newString[list.size()];//使用fo......
  • vue + tornado 个人博客项目简介
    vue+tornado个人博客项目简介项目链接:https://www.freepd.top项目链接:https://admin.freepd.top项目简介首页预览本站接入了百度api每小时更新访问量域名在阿里云购买,解析到腾讯云服务器ssl证书为阿里云每年免费申请20个技术栈前端:vue2+element-ui+axios+vue......
  • Vue2 element-table 动态添加一行
    Vue2element-table动态添加一行<template><divclass="app-container"><!--表格--><el-table:data="tableData":height="fullHeight"border><el-table-columntype="index"label=&q......
  • vue实现文件上传与下载
    一、文件上传(多个文件上传) 1、文件上传弹窗代码:<!--================================上传文件弹窗=========================--><el-dialog:title="addFileTitleName":visible.sync="dialogAddFile"width="500px"style="padding:0;&q......
  • vue3项目创建
    1.确保npm指令能够运行-官网下载nodejs Download|Node.js(nodejs.org) 安装完成后重启intellij2.终端输入npminstall-gcreate-vue3.终端输入create-vue新建vue项目根据需要设置功能,例:4.打开新建vue项目中的README,点击npminstall前的绿色箭头,在t......
  • vue打包部署遇到的问题
    网站上线中遇到的问题(跨域,404,空白页解决方案)因为本人是后端开发工程师,对前端开发不了解,踩了很多坑,所以将踩过的坑分享出来,以供参考网站地址:这里这段时间将项目部署到服务器中引发了几个问题第一个问题:跨域一般跨域是由后端来解决的,但是由于项目中加入了追踪请求的日志,频繁o......
  • 开发实例:后端Java和前端vue实现文件上传和下载功能
    首先,在Java的后端代码中,我们可以使用Spring框架来实现文件上传和下载功能。以下是一个简单的示例:文件上传首先,我们需要在html页面上创建一个表单,其中包含一个file类型的输入字段:<formaction="/upload"method="POST"enctype="multipart/form-data"><inputtype=......
  • vue3 vite 根据目录生成路由
    vite勾选vue-router搭建好项目后,routes部分示例代码为routes:[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',//routelevelcode-splitting......
  • 使用vite自动生成vue路由
    全新的路由组织方式以往编写路由都需要手动编写router.js代码,其实很多代码是重复的新的方案根据文件夹目录结构自动生成文件夹下的index.vue->/初始化项目构建npminitvue@latest运行npmrundev项目结构一个文件夹对应一个路由page.js用来填写配置信息exportdefault{ti......