无法将表单数据存储到会话存储中答案

【问题标题】：Unable to store form data into session storage无法将表单数据存储到会话存储中
【发布时间】：2020-12-27 19:39:48
【问题描述】：

我刚开始学习 JavaScript，我试图让用户输入表单数据并将它们存储到会话存储中，但我似乎做不到。请多多指教，谢谢。

JavaScript

$(function() {
    $("formset").submit(function (event) {
        event.preventDefault();

        var name = $("#fullname").val();
        var email = $("#email").val();
        var phonenumber = $("#phonenumber").val();
        var message = $("#message").val();

        if (typeof (Storage) !== "undefined") {
        sessionStorage.setItem("Fullname", name);
        sessionStorage.setItem("E-mail", email);
        sessionStorage.setItem("Phoneno", phonenumber);
        sessionStorage.setItem("Msg", message);
        }
    });
});

HTML

<form id="formset" class="main_form">
  <div class="row">
    <div class="col-md-12 ">
      <input class="contactus" placeholder="Full Name" type="text" id="fullname" required>
    </div>
    <div class="col-md-7">
      <input class="contactus" placeholder="Email" type="tel" id="email" required>
    </div>
    <div class="col-md-7">
      <input class="contactus" placeholder="Phone Number" type="text" id="phonenumber" required>
    </div>
    <div class="col-md-12">
      <textarea class="contactus1" placeholder="Message" type="text" id="message" required></textarea>
    </div>
    <div class="col-md-12">
      <button class="send_btn" type="submit" id="submitform">Send</button>
    </div>
  </div>
</form>

【问题讨论】：

既然您确实使用了 jQuery 标签，您能否将其添加到此问题中？我在写你也是这个问题的解决方案。
使用Window.sessionStorage 而不仅仅是sessionStorage。除非您已将 Window.sessionStorage 分配给 sessionStorage 其他地方
那是旧学校代码@codemax - 现代浏览器自己理解 sessionStorage。 window.PROPERTY 仅在定义您自己的窗口变量和与另一个根对象（如文档）重叠的特定属性时才需要。
如果你刚开始学习 JavaScript - 为什么要“限制”自己使用 jquery 等库？

标签： javascript html forms session-storage

【解决方案1】：

好的，您在尝试从 Javascript 调用的表单 ID 属性中犯了一个非常小的错字。

如果$ 在您的浏览器检查器中未定义，您应该能够通过$('#formset') 而不是$('formset') 选择表单。让我知道这是否有效。通过这种调整，我让它在我的机器上工作了:-)

另一个学习 Javascript 的好习惯是写

console.log("Script entered this <FUNCTION_NAME>");

所以我这样做在三秒钟内解决了你的问题：

$(function() {
    console.log("Script finished jQuery initialization.")
    $("formset").submit(function (event) {
        console.log("Script entered submit event.");
        event.preventDefault();

        var name = $("#fullname").val();
        var email = $("#email").val();
        var phonenumber = $("#phonenumber").val();
        var message = $("#message").val();

        if (typeof (Storage) !== "undefined") {
            sessionStorage.setItem("Fullname", name);
            sessionStorage.setItem("E-mail", email);
            sessionStorage.setItem("Phoneno", phonenumber);
            sessionStorage.setItem("Msg", message);
        }
    });
});

在检查器中启用“保留日志”选项后，您会在控制台中看到实际的提交消息。否则，您将在表单 sumbit 操作后被重定向并且您的控制台被清除。

这就是我很容易发现错误的方式。我从来没有收到“脚本输入提交事件”。消息。

【讨论】：

没问题，很高兴我能帮助@gregory