Html如何使表达提交后,点回退/返回,保留表单数据?

Html如何使表达提交后,点回退/返回,保留表单数据?


如果a页是一个表单,提交时因某种原因转至出错页面b,如何在b中返回已填写数据的表单a(数据不变)?  

 
表单a,要保留的都使用class=saveHistory  
 
< HTML >   
 
< HEAD >   
< META   NAME ="save"   CONTENT ="history" >   
< STYLE >   
     .saveHistory  
{ behavior : url(#default#savehistory) ; }   
</ STYLE >   
</ HEAD >   
< BODY >   
< FORM   name =a >   
< INPUT   class =saveHistory   type =text   id =oPersistInput >   
</ FORM >   
</ BODY >   
</ HTML >   


---------------------------------------------------------------  

注意: meta中必须设置 name=save  content=history
 
上面的代码确保表单a(数据不变),后退功能在出错页面b可以使用history.back()或history.go(-1)都可以实现,例如:  
<input  type=button  value=Back  οnclick=history.back()>  
<input  type=button  value=Back  οnclick=history.go(-1)>
 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue H5开发中,为了保留数据并实现回退功能,可以使用以下两种方法: 1. 利用Vue Router的beforeRouteLeave生命周期钩子函数,该函数可以在离开某个路由之前执行一段代码。我们可以在该钩子函数中将需要保留数据存储到sessionStorage或localStorage中,然后在下一个路由页面的created生命周期中读取并初始化数据。这样,在回退到之前的页面时,可以再次读取存储的数据并进行展示。 例如,在离开某个路由时,可以将数据存储至sessionStorage中: ```javascript beforeRouteLeave(to, from, next) { sessionStorage.setItem('data', JSON.stringify(this.data)); next(); } ``` 然后,在进入下一个路由时,可以在created生命周期中读取并初始化数据: ```javascript created() { const data = sessionStorage.getItem('data'); if (data) { this.data = JSON.parse(data); } } ``` 2. 使用Vuex来进行数据的管理。Vuex是Vue的状态管理库,可以实现全局共享数据。通过在状态管理仓库中存储需要保留数据,在路由切换时将其更新,这样数据可以在页面间共享,实现回退时的数据保留。 例如,在Vuex中定义一个state存储数据: ```javascript state: { data: null }, mutations: { setData(state, payload) { state.data = payload; } } ``` 然后,在离开某个路由时,可以调用mutation来更新数据: ```javascript beforeRouteLeave(to, from, next) { this.$store.commit('setData', this.data); next(); } ``` 在进入下一个路由时,可以通过getter来获取并初始化数据: ```javascript created() { this.data = this.$store.state.data; } ``` 以上就是保留数据并实现回退功能的两种方法,开发者根据具体需求,选择合适的方法来实现即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值