javascript - 使用数组将表单数据存储在本地存储中并在新页面上检索它

Question

这是第一页。

<form id="myform">

  <label for="fname" class="fname_label">Name</label>
  <input type="text" id="fname" class="input1" placeholder="Full Name" name="fname">

  <label for="phone">Phone</label>
  <input type="number" name="phone" id="phone" placeholder="Phone Number">

  <label for="textarea" class="textarea_label">Address:</label>
  <textarea name="address" id="textarea" type="text"></textarea>

  <label for="select">Gender:</label>
  <select name="select" id="select">
                  <option value = "0">Select</option>
                  <option value = "1">Male</option>
                  <option value = "2">Female</option>
                  <option value = "3">Other</option>
               </select>
  <label for="select1">Category:</label>
  <select name="select1" id="select1">
                  <option value = "0">Select</option>
                  <option value = "1">Open</option>
                  <option value = "2">OBC</option>
                  <option value = "3">SC/ST</option>
                  <option value = "4">Other</option>
               </select>
  <label for="select2">State:</label>
  <select name="select2" id="select2">
                  <option value = "0">Select</option>
                  <option value = "1">Maharashtra</option>
                  <option value = "2">Gujarat</option>
                  <option value = "3">Rajasthan</option>
               </select>
  <label for="select3">District:</label>
  <select name="select3" id="select3">
                  <option value = "0">Select State</option>
                  <option value = "1">Select</option>
                  <option value = "1">Pune</option>
                  <option value = "1">Vidarbha</option>
                  <option value = "1">Thane</option>
                  <option value = "2">Select</option>
                  <option value = "2">Bharuch</option>
                  <option value = "2">Ahmedabad</option>
                  <option value = "2">Jamnagar</option>
                  <option value = "3">Select</option>
                  <option value = "3">Jaipur</option>
                  <option value = "3">Jodhpur</option>
                  <option value = "3">Bikaner</option>
               </select>
  <h id="qualifications">Qualifications:</h>
  <label for="checkbox1">BE</label>
  <input name="education[]" type="checkbox" value="BE" id="checkbox1">
  <label for="checkbox2">MCA</label>
  <input name="education[]" type="checkbox" value="MCA" id="checkbox2">
  <div data-role="fieldcontain">
    <label for="select-based-flipswitch">Subscription:</label>
    <select id="select-based-flipswitch" data-role="flipswitch">
                     <option value="OFF">OFF</option>
                     <option value="ON">ON</option>
                  </select>
  </div>
  <button id="myButton" type="submit" value="Submit" class="ui-btn ui-btn-b">Submit</button>
</form>

这是我尝试将用户输入的值存储在本地存储中。

$(document).ready(function() {
  $('#select').change(function() {
    localStorage.setItem('select', $('#select option:selected').text());
  });

  $('#select1').change(function() {
    localStorage.setItem('select1', $('#select1 option:selected').text());
  });

  $('#select2').change(function() {
    localStorage.setItem('select2', $('#select2 option:selected').text());
  });

  $('#select3').change(function() {
    localStorage.setItem('select3', $('#select3 option:selected').text());
  });

  $("button").click(function() {
    var name = $("#fname").val();
    var phonenum = $("#phone").val();
    var address = $("#textarea").val();
    var subscribe = $("#select-based-flipswitch").val();

    var qualification = '';
    var qualification1 = '';
    if ($("#checkbox1").is(":checked")) {
      qualification = $("#checkbox1").val();
    }
    if ($("#checkbox2").is(":checked")) {
      qualification1 = $("#checkbox2").val();
    }

    var input = [name, phonenum, address, select, select1, select2, select3, qualification, qualification1, subscribe];

    localStorage.setItem("input", JSON.stringify(input));
  });
});

这是我想要显示所有数据的第二页。

<body>


  <div data-role="page" id="page2" data-dismissible="false">

    <div data-role="header">
      <h2 class="ui-title">Confirmation</h2>
    </div>

    <div data-role="main" class="ui-content">


      <div id="content">
        <p> Name: <span id="display_fname" class="one"></span></p>
      </div>

      <p> Phone No.: <span id="display_phone" class="one"></span></p>

      <div id="content">
        <p> Address: <span id="display_textarea"></span></p>
      </div>

      <p> Gender: <span id="display_select" class="one"></span></p>

      <p> Category: <span id="display_select1" class="one"></span> </p>

      <p> State: <span id="display_select2 " class="one"></span></p>

      <p> District: <span id="display_select3" class="one"></span> </p>


      <p> Qualification: <span id="display_qualifications" class="one"></span> </p>

      <p> Subscription: <span id="display_select-based-flipswitch" class="one"></span> </p>


      <a href="" class="ui-btn ui-btn-inline ui-btn-b btn-1" onClick="window.location.replace('form1.html');">OK</a>

      <a href="" class="ui-btn ui-btn-inline ui-btn-b btn-2" onClick="window.location.replace('form1.html');"> Back</a>
    </div>

  </div>
</body>

这是我从本地存储中获取值的尝试。仅显示姓名、电话地址，其余未显示任何内容。

$(document).ready(function() {
  for (let i = 0; i < localStorage.length; i++) {
    var storedInput = JSON.parse(localStorage.getItem("input"));

    $("#display_fname").html(storedInput[0]);
    $("#display_phone").html(storedInput[1]);
    $("#display_textarea").html(storedInput[2]);
    $("#display_select").html(storedInput[3]);
    $("#display_select1").html(storedInput[4]);
    $("#display_select2").html(storedInput[5]);
    $("#display_select3").html(storedInput[6]);
    $("#display_qualifications").html(storedInput[7] + " " + storedInput[8]);
    $("#display_select-based-flipswitch").html(storedInput[9]);

    localStorage.clear();
  }
});

我只能显示姓名、电话和地址作为输出。其余其他字段没有显示任何内容。

Answer 1

假设输入元素的 name 存在一对一映射属性为 span 元素的 id属性(即 <input name="fname" /> 映射到 <span id="display_fname"> ，您可以轻松使用逻辑来执行以下操作:

1. 提交表单后，您将创建一个包含 name 的对象数组。输入字段及其值。将此数组转换为 JSON 并将其存储在 localStorage 中。
2. 当您选择使用存储的数据填充 DOM 时，只需解析 localStorage 中存储的 JSON，遍历数组中的每个元素即可。每个元素将包含一个指针，存储在name中键，到显示元素。

A proof-of-concept is published on JsFiddle因为 StackOverflow 的代码片段无法在浏览器不提示 CORS 的情况下处理 localStorage。不过，下面的代码非常简单:

在表单页面上:

$(document).ready(function() {

  // Instead of listening to button click, always listen to form submit event
  $('#myform').submit(function(e) {
    e.preventDefault();

    // Create an array of objects called `formData`
    var formData = $(this).find(':input').map(function() {
      return {
        name: $(this).attr('name'),
        value: $(this).val()
      };
    }).get();

    // Store it in localStorage
    localStorage.setItem('formData', JSON.stringify(formData));
  });
});

在您的显示/确认页面:

$(document).ready(function() {

  // Read and parse from localStorage
  var formData = JSON.parse(localStorage.getItem('formData'));

  // Iterate through array, and set HTML of matching <span> element
  $.each(formData, function(i, datum) {
    $('#display_' + datum.name).html(datum.value);
  });
});