javascript - localStorage - 多个值

Question

我有一个名为“mail”的输入字段。我想将邮件地址和 ID 添加到本地存储中。邮件地址的值应来自输入字段每次我添加邮件地址时，“邮件”和 ID 都应该计数。目前，变量“id”和“mail”有静态值。

有人可以告诉我如何做到这一点吗？

这是我的代码:

var id = 1;
var mail = "Mail";

$(".store").on("click", function(){
     var mailaddress = localStorage.getItem("mailaddress");
     var obj = [];
     if(mailaddress){
         obj= JSON.parse(mailaddress);  
     }
     obj.push({"id":  id, "mail":mail});
     localStorage.setItem("mailaddress",JSON.stringify(obj));
 });

$("#show").on("click", function(){
    var item = JSON.parse(localStorage.getItem("mailaddress"));
    alert(item);
    console.log(item);
});
$('#reset').click(function(){
    localStorage.clear();
});

<div id="storage">
<input type="text" id="mail" value=""/>
<button class="store">store</button>
<button id="reset">reset</button>
<button id="show">show</button></div>

http://jsfiddle.net/w3uu6y0r/1/

Answer 1

邮件部分非常简单。替换点击处理程序中的邮件变量以获取值:

obj.push({"id":  id, "mail":$('#mail').val()});

您可能需要对输入的电子邮件进行值和模式检查，以免收到垃圾邮件。

对于 id，您已经有了一个 id 数组，那么为什么不直接获取最大的一个并对其 +1 呢？

if (obj.length > 0) {
        id = Math.max.apply(null, obj.map(function (entry) { return parseFloat(entry.id); })) + 1;
    }
    else {
        id = 1;
    }

好吧，让我解释一下这段代码。

obj.map(function (entry) { return parseFloat(entry.id); })

Map 是一个迭代数组的函数，并使用每个 return 语句中的值返回一个新数组。因此，如果您有一个 [1,2,3] 数组并运行 [1,2,3].map(function(v) { return v + 1; }); 你将得到[2,3,4]。在本例中我使用它获取 id 数组。 parseFloat 可能是不必要的，但我对本地存储持谨慎态度。

Math.max 通常可用于返回两个或多个值之间的最大数字:Math.max(2, 5) 将返回 5。在本例中，我使用 apply 所以我可以传递一个数组。它与: Math.max.apply(null, [2,5]);