本地存储API不工作的Javascript/jQuery

我试图在用户提交表单时使用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行的浏览器控制台中收到此错误消息：

未捕获类型错误：无法将属性“innerHTML”设置为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非常陌生，不经常使用它，但我确实需要保存此值并以另一种形式重新填充它。

查看您的链接后，我发现

guestEmail

是您页面上的

文本框，因此
innerHTML
在这里不起作用。另外，
.value
和
.html
的jquery实现也不正确

您需要更新jquery，如下所示

$(function() {
    // Check for LocalStorage support. 
    if (localStorage) {
        // Add an event listener for form submissions 

        $('form').on('submit', function() {
            // Get the value of the email field. 
            var email = $('#email').val();
            // Save the name in localStorage. 
            localStorage.setItem('#email', email);
            $('#guestEmail').html(email);
            console.log(localStorage.getItem('#email'));
        });
    }

    var emailLocalStorage = localStorage.getItem('#email');
    console.log(emailLocalStorage);

    if (typeof emailLocalStorage != "undefined" && emailLocalStorage != "null") {
        $('#guestEmail').val(emailLocalStorage);
        console.log(emailLocalStorage)
    } else {
        $('#guestEmail').val("");
    }
});

希望这有帮助。
确保您有一个id为“guestEmail”的元素，您在jquery中设置值的方式也是错误的。它应该是
$（'#guestEmail'）.html（'''）
或
$（'#guestEmail'）.html（电子邮件）
你能给我们看一下html吗？看看你的代码后试试这个小提琴，我看到
searchBooking
是div的id，你已经在（'submit'，function（）上写了
$（'#searchBooking'）{
在jquery代码中。它不会工作，因为它不是按钮或表单。您需要编写
$（'form'）。在（'submit'，function（）{//your code here}）上
谢谢Sushil这对我的应用程序非常有用，我现在正在重复使用代码来捕获其他数据，而不仅仅是电子邮件。如果没有您的帮助，我不可能做到这一点！非常欢迎：）很高兴能够帮到您。如果您需要帮助，请告诉我。