浏览器填写数据,跳转页面返回数据不消失

步骤一:点击按钮,保存数据,跳转页面

$("#userAgree").on("click",function(){
  var obj = {};
  obj.username = $("[name=username]").val();
  obj.telephone = $("[name=telephone]").val();
  obj.verifiyCode = $("[name=verifiyCode]").val();
  obj.inviteCode = $("[name=inviteCode]").val();
  obj.agree = $("#agree").prop("checked");
  sessionStorage.setItem('seek_register_info',JSON.stringify(obj));
});

这里用sessionStorage 的原因是:localStorage会一直保存在本地就算关闭了浏览器下次进来还是会有记录,sessionStorage 在关闭后会清除数据。

步骤二: 返回页面回填表单

var registerInfo = JSON.parse(sessionStorage.getItem('seek_register_info'));
if(registerInfo){
  var username = registerInfo.username;
  var telephone = registerInfo.telephone;
  var verifiyCode = registerInfo.verifiyCode;
  var inviteCode = registerInfo.inviteCode;
  var agree = registerInfo.agree;
  $("[name=username]").val(username);
  $("[name=telephone]").val(telephone);
  $("[name=verifiyCode]").val(verifiyCode);
  if(inviteCode && (inviteCode!='')){
    $("[name=inviteCode]").val(inviteCode).attr("disabled",true);
  }
  $("#agree").prop("checked",agree);
}

步骤三:清除数据

sessionStorage.removeItem('seek_register_info');

这里一定要清除数据,否则刷新页面表单数据也不会清除。

PS: 关于返回页面不执行js的问题看这篇文章:返回页面不执行js问题

你可能感兴趣的:(web前端,javascript)