如何将数据存储在表单中，以便在页面刷新时仍然填充字段

Question

我是 S.O 和 javascript 的新手。我正在为电子商务网站进行最后一年的项目，并且在将数据从表单保存到本地存储时遇到了死胡同。我的代码在下面，我真的看不出我哪里出错了。感谢所有帮助。

window.onload = function() {
  // Check for LocalStorage support.
  if (localStorage) {
    // Populate the form fields
    populateForm();

    // Get the form
    var form = document.getElementById("franchiseForm");

    // Event listener for when the bookings form is submitted.
    form.addEventListener("submit", function(e) {
      saveData(form);
    });
  }
}

// Save the form data in LocalStorage.
function saveData() {
  //fetch sava(data)
  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

  //store the values
  localStorage.setItem("fran_name", fran_name.value);
  localStorage.setItem("name", name.value);
  localStorage.setItem("address1", address1.value);
  localStorage.setItem("address2", address2.value);
  localStorage.setItem("city", city.value);
  localStorage.setItem("pcode", pcode.value);
  localStorage.setItem("phone", phone.value);
}

// Attempt to populate the form using data stored in LocalStorage.
function populateForm() {
  // Fetch the input elements.
  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

  //retrieve saved data and update the values of the form.
  if (localStorage.getItem("fran_name") != null) {
    name.value = localStorage.getItem("fran_name");
  }

  if (localStorage.getItem("name") != null) {
    phone.value = localStorage.getItem("name");
  }

  if (localStorage.getItem("address1") != null) {
    email.value = localStorage.getItem("address1");
  }
  if (localStorage.getItem("address2") != null) {
    email.value = localStorage.getItem("address12");
  }
  if (localStorage.getItem("city") != null) {
    email.value = localStorage.getItem("city");
  }
  if (localStorage.getItem("pcode") != null) {
    email.value = localStorage.getItem("pcode");
  }
  if (localStorage.getItem("phone") != null) {
    email.value = localStorage.getItem("phone");
  }
}
window.onload = function(){
  if (localstorage){
    //populate the form fields
    populateform(form);
  }
}

<div id="section">  

  <form id="franchiseForm" action ="Order_confirmation.php" method="POST">

    <div class="field">
      <label for="fran_name">Franchise Name</label>
      <input type="text" name="franchise_name" id="fran_name" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]" 
             autofocus required tabindex="1">
      <br>

      <label for="name">Name</label>
      <input type="text" name="franc_name" id="name" placeholder="Joe Blogs" required tabindex="2">
      <br>

      <label for="address"> Address</label>
      <input type="text" name="franc_address" id="address1" placeholder="Address Line 1" tanindex="3">
      <input type="text"  id="address2" placeholder="Address Line 2" tabindex="4">
      <input type="text"  id="city" placeholder="Town/City" tabindex="5">
      <input type="text"  id="pcode" placeholder="Postcode" tabindex="6">
      <br>

      <label for="phone" > Phone Number</label>
      <input type="tel" name="franc_phone" id="phone" placeholder="Customer service number" min="10" maxlength="11" pattern="[0-9]{3}[-][0-9]{4}[-][0-9]{4}" 
             required title="Please provide your customer service number in the following format: 000-0000-0000" tabindex="7">
    </div>

    <div class="field">
      <input type="submit" id="submit" value="submit">
    </div>
  </form>

Answer 1

最主要的是，检查你的控制台是否有这个错误：

未捕获的引用错误：localstorage 未定义。

更改您的代码。它是localStorage 而不是localstorage。那是大写S。

这里有一个大错误。是getElementById 而不是getElemenyById：

  var fran_name = document.getElemenyById("fran_name"); 
  var name = document.getElemenyById("name");
  var address1 = document.getElemenyById("address1");
  var address2 = document.getElemenyById("address2");
  var city = document.getElemenyById("city");
  var pcode = document.getElemenyById("pcode");
  var phone = document.getElemenyById("phone");

你的错误太多了！ Elemeny != Element.

看起来这正在阻止您的代码执行：

  if (localStorage.getItem("address1") != null) {
    email.value = localStorage.getItem("address1");
  }
  if (localStorage.getItem("address2") != null) {
    email.value = localStorage.getItem("address12");
  }
  if (localStorage.getItem("city") != null) {
    email.value = localStorage.getItem("city");
  }
  if (localStorage.getItem("pcode") != null) {
    email.value = localStorage.getItem("pcode");
  }
  if (localStorage.getItem("phone") != null) {
    email.value = localStorage.getItem("phone");
  }

您没有名为email 的变量。此外，您正在尝试设置未定义元素变量 email 的值，它没有名为 value 的属性，这会阻止您执行所有脚本。

Answer 2

首先，不在你使用的代码中：

document.getElemenyById(...);
localstorage.setItem()

而不是（注意 Elemeny 与 Element，s 与 S）：

document.getElementById(...);
localStorage.setItem();

---

至于完整的解决方案：

您可以使用各种本地存储将这些数据存储在浏览器中。 当页面即将重新加载时，您可以执行以下操作：

window.onbeforeunload = function() {
    var fran_name = document.getElementById("fran_name"); 
    var name = document.getElementById("name");
    // ...

    localStorage.setItem("fran_name", fran_name.value);
    localStorage.setItem("name", name.value);
    // ...
}

localstorage 同步工作，所以这将在这里工作。

在页面加载时您可以检查：

window.onload = function() {

    var name = localStorage.getItem(name);
    if (name !== null) document.getElemenyById("name").value = name;

    // ...
}

如果数据不存在，getItem 将返回 null`。

如果您想临时存储，请使用sessionStorage 而不是localStorage - 直到浏览器关闭。

---

这是您的表单的简化版本，其中包含完整的工作代码。将其保存为 .html 文件：

<html>
    <head>
        <script type="text/javascript">
            // For saving data:
            window.onbeforeunload = function() {
                var name = document.getElementById("name");
                // ...
                localStorage.setItem("name", name.value);
                // ...
            }
            // For loading data:
            window.onload = function() {
                var name = localStorage.getItem(name);
                if (name !== null) document.getElemenyById("name").value = name;
                // ...
            }
        </script>
        <title></title>
    </head>
    <body>
        <div id="section">
            <form id="franchiseForm" action="Order_confirmation.php" method="POST">
                <div class="field">
                    <label for="name">Name</label>
                    <input type="text" name="franc_name" id="name" placeholder="Joe Blogs" required tabindex="2">
                    <br>
                </div>
            </form>
        </div>
    </body>
</html>

Answer 3

如果你能够使用 JQuery 和 JQuery Cookie，你可以将数据保存在 cookie 中：

var frn = $(#fran_name).val();
$.cookie("fran_name", frn);

然后在页面加载时获取 cookie 数据，然后将其插入到字段中：

$(document).ready(function(){
    var cookie = $.cookie("fran_name");
    $('#fran_name').val(cookie);
});