vue+localStorage保存数组

需求：

做一个手机版的web表单，提交后数据就保留在web页面的localstoge中，下次用户再打开这个页面的时候，判断一下用户是否已经提交过，没有提交则显示表单页面，已经提交了则显示填写的信息页面

1.首先编写表单布局（以下面的为例子）：

<div>
<div class="demo-input-suffix" style="margin-top: 10% !important;font-size: 12px !important;color:rgb(255,0,0)">
        <div style="font-size: 10px;margin-bottom:1rem;color: #626262 ">名称：</div>
        <el-input prefix-icon="el-icon-office-building" v-model="companyName" placeholder="请输入名称" clearable class="input-el"></el-input>
      </div>
      <div class="demo-input-suffix" style="margin-top:1rem !important;font-size: 12px !important;color:rgb(255,0,0)">
        <div style="font-size: 10px;margin-bottom:1rem;color: #626262 ">姓名：</div>
        <el-input prefix-icon="el-icon-user" v-model="userName" placeholder="请输入你的姓名" clearable class="input-el"></el-input>
      </div>
 <div style="display:flex;margin-top: 2rem;width: 100%">
        <el-button type="warning" class="btn" @click="goSubmit">提交</el-button>
      </div>
</div>

2.编写localStorage保存信息

  goSubmit() {
          if(this.companyName!==''&&this.userName!==''){
            var arr=[
              {
              thecompanyName:this.companyName,
              userName:this.userName,
            }]
            console.log('arr--->',arr)
            localStorage.setItem('userArr',JSON.stringify(arr)),   //把填写的信息赋值给数组，再把数组保存到localStorage中
            this.$router.push({ path:'/index'  })  //跳转到下个页面
          }else{
            this.$message({
              message: '你还没有填写完整的信息！',
              type: 'warning'
            });
          }
        },

3.获取localStorage保存信息

      mounted(){
        this.userArr = JSON.parse(localStorage.getItem('userArr'))   //获取localStorage数组数据
        console.log('ggggg',this.userArr)
        if(this.userArr==null||this.userArr==''){   //没有存储的信息
          // this.$router.push({ path:'/login' })
        }else{
          this.$router.push({ path:'/index' })   //表示填写过了，所以跳转到显示信息页面
        }
      },

可以去查看localStorage数组，F12打开控制台找到Application