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

问题描述：

我有一个表单部分，用户可以在其中添加他们的电子邮件地址。将HTML表单数据保存到本地存储

我有几个问题：

（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'));

从引用的零碎代码中回答您的问题是不可能的，但为什么在存储数据时将数据加倍串化？（并注意var stuff =（$（$ email）.val（））中的外层元素是完全没有意义的。） –

好点。我真的正在寻找一种从表单元素到页面刷新的方式，仍然有一个数组，例如[[email protected]，[email protected]等]。在概念上和实际上，我很难解决这个问题。 – Matty

答

它看起来像选择您的电子邮件输入错误，可以尝试将其更改为：

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/

这似乎很适合显示值，但它似乎并不能将它们保存在数组中。我正在寻找理想的输入电子邮件（[email protected]）页面刷新（[email protected]）。 'console.log（arr）'包含example和example2s的电子邮件。 – Matty

满足我的要求！ – Matty

答

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

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

有防止几种方法的形式提交类似

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

在myFunc的

，你必须在最后返回false。你也可以使用preventDefault。

我想我理解那个部分，但是如果值在页面之后重置，我该如何保存到数组？ – Matty

在页面重新加载之前保存。您阻止提交，保存您的电子邮件，然后触发提交。 – afmeva

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

相关推荐