vue+localStorage保存数组
需求:做一个手机版的web表单,提交后数据就保留在web页面的localstoge中,下次用户再打开这个页面的时候,判断一下用户是否已经提交过,没有提交则显示表单页面,已经提交了则显示填写的信息页面1.首先编写表单布局(以下面的为例子):<div><div class="demo-input-suffix" style="margin-top: 10% !impo...
·
需求:
做一个手机版的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
更多推荐
已为社区贡献11条内容
所有评论(0)