Question

我正在尝试使用localStorage API在用户提交表单时获取电子邮件值，然后再填充另一个表单字段。

我首先尝试使用vanilla javascript：

window.onload = function() {

  // Check for LocalStorage support.
  if (localStorage) {

    // Add an event listener for form submissions
    document.getElementById('searchBooking').addEventListener('submit', function() {
      // Get the value of the email field.
      var email = document.getElementById('email').value;

      // Save the email in localStorage.
      localStorage.setItem('email', email);
    });

  }  

  // Retrieve the users email.
   var email = localStorage.getItem('email');

   if (email != "undefined" || email != "null") {
     document.getElementById('guestEmail').innerHTML = email;
   } else {
     document.getElementById('guestEmail').innerHTML = "";
   }

}

但在第21行的浏览器控制台中收到此错误消息：

Uncaught TypeError: Cannot set property 'innerHTML' of null

然后我尝试了这个jQuery：

$(function() {
  // Check for LocalStorage support.
  if (localStorage) {
    // Add an event listener for form submissions
    $('#searchBooking').on('submit', function() {
      // Get the value of the email field.
      var email = $('#email').value;
      // Save the name in localStorage.
      localStorage.setItem('#email', email);
  });
  }

  var email = localStorage.getItem('#email');
  if (email != "undefined" || email != "null") {
    $('#guestEmail').html = email;
  }
   else {
    $('#guestEmail').html = "";
    }
});

我没有收到错误消息，但没有任何效果。

对不起，我是Javascript的新手并且不经常使用它，但我真的需要保存这个值并以另一种形式重新填充它。

Answer 1

在查看 gist 链接后，我发现您的网页上guestEmail为textbox，因此innerHTML不会在这里工作<{1}}和.value的jquery实现也不正确。

您需要更新您的jquery，如下所示

.html

希望这有帮助。

使用localStorage API的Javascript / jQuery无法正常工作

1 个答案: