如何在 javascript 中正确地将表单数据保存在本地存储中以供以后使用

Question

提交表单后，我需要将表单数据（名字和姓氏）保存在本地存储中，这样下次我想提交表单时就不必再次输入了。

我已经尝试了下面的代码，但是当我刷新页面时，表单数据没有保存在本地存储中。

<!DOCTYPE html>
<html>
  <head>
    <title></title>

  </head>
  <body>


<script  type="text/javascript">
  function store(){

     var firstname= document.getElementById('firstname').value;
     localStorage.setItem("firstname_data", firstname);

     var lastname= document.getElementById('lastname').value;
     localStorage.setItem("lastname_data", lastname);


var storedValue_firstname = localStorage.getItem("firstname_data");
var storedValue_lastname = localStorage.getItem("lastname_data");

 alert(storedValue_firstname);
alert(storedValue_lastname);

              //document.getElementById('firstname').value = storedValue_firstname;
//document.getElementById('lastname').value = storedValue_lastname;


//window.location='/';
    }
</script>
 
<form  action="test.php" class="form1"  method="post" /> 
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>



<button onclick="store()" type="button">Store Form Data</button>
</form>
  </body>
</html>

Answer 1

您可以尝试使用 windows.onload 事件。 当您重新加载页面时，您可以通过此事件检查是否有任何内容存储在本地存储中。 如果存储，则将根据需要将此值设置为输入字段。 在此处查看示例代码

<!DOCTYPE html>
<html>
  <head>
    <title></title>

  </head>
  <body>     
<form  action="test.php" class="form1"  method="post" /> 
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>

<button onclick="store()" type="button">Store Form Data</button>
</form>
  <script  type="text/javascript">
  function store(){
     var firstname= document.getElementById('firstname').value;
     localStorage.setItem("firstname_data", firstname);

     var lastname= document.getElementById('lastname').value;
     localStorage.setItem("lastname_data", lastname);


      alert(storedValue_firstname);
      alert(storedValue_lastname);


    }
    
   window.onload = function exampleFunction() {
    var storedValue_firstname = localStorage.getItem("firstname_data");
    var storedValue_lastname = localStorage.getItem("lastname_data");
    if(storedValue_firstname) {
      document.getElementById('firstname').value = storedValue_firstname;
    }
       if(storedValue_lastname) {
      document.getElementById('lastname').value = storedValue_lastname;
    }
  }
</script>
  </body>
</html>

如何在 javascript 中正确地将表单数据保存在本地存储中以供以后使用

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-08-28 22:43:01

如何在 javascript 中正确地将表单数据保存在本地存储中以供以后使用

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-08-28 22:43:01

解决方案1
0 已采纳 2022-08-28 22:43:01