Question

我是S.O和javascript的新手。我正在为一个电子商务网站开展最后一年的项目，并且在将数据从表单保存到本地存储方面已经陷入了死胡同。我的代码在下面，我真的不知道我哪里出错了。所有的帮助表示赞赏。

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

主要是检查您的控制台是否存在此错误：

未捕获的ReferenceError：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 vs. Element，s vs. 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);
});

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

3 个答案: