Question

我有一个表单部分，人们可以在其中添加他们的电子邮件地址。

我有几个问题：

（1）页面在提交电子邮件地址时刷新（我知道如果没有ajax或异步解决方案，这是不可避免的）。然而，它导致了第二个问题，

（2）我似乎无法将这些电子邮件保存为数组并使用JSON.parse(localStorage.getItem('EmailsStuff'))

将其显示出来

我的JS / Jquery的一部分

var total = [];
                $(document).on("click", ":submit", function(e) {
                    var stuff = ($($email).val())
                    total = [JSON.stringify(stuff)];

                    localStorage.setItem('EmailsStuff', JSON.stringify(total));
            });

和html：

<form class="newsletter">

        <input type="email" value="" placeholder="Join Update List Here" class ="newsletter-email" />
        <input type="submit" value="Thanks!" class="newsletter-email" id="fast"/>
    </form>

如果我采样：

localStorage.setItem('sample',JSON.stringify(["bob", "susan", "rafiki"]);

因此将其视为

JSON.parse(localStorage.getItem('sample'));

Answer 1

看起来您的电子邮件输入选择器是错误的，请尝试将其更改为：

var stuff = $('#email').val();

并为您的输入提供ID：

<input id="email" type="email" value="" placeholder="Join Update List Here" class ="newsletter-email" />

请参阅此小提琴：https://jsfiddle.net/m8w1uaso/

修改如果您希望保留所有先前输入的电子邮件地址并在每次提交表单时添加到此数组，您可以执行以下操作：

$(document).on("click", ":submit", function(e) { var stuff = ($('#email').val()); // Load emails var emails = JSON.parse(localStorage.getItem('EmailsStuff')); if (emails) { // If the item exists in local storage push the new email address to the array and and save emails.push(stuff); localStorage.setItem('EmailsStuff', JSON.stringify(emails)); } else { // If the item doesn't exist in local storage set the item to a new array containing new email address localStorage.setItem('EmailsStuff', JSON.stringify([stuff])); } }); $(document).on("click", "#loadEmail", function(e) { alert(JSON.parse(localStorage.getItem('EmailsStuff'))); });

请参阅此小提琴：https://jsfiddle.net/v9c6xnmh/

Answer 2

您可以阻止表单提交，直到您将电子邮件阵列保存在本地存储上，然后触发提交。

document.getElementById("myForm").submit();

有几种方法可以阻止表单提交，如

<form onsubmit="return myfunc()"... or <form onsubmit="return false"

在myFunc中，你必须在结尾处返回false。你也可以使用preventDefault。

将HTML表单数据保存到本地存储

2 个答案: