localStorage - 多个值

Question

我有一个名为“邮件”的输入字段。我想将邮件地址和 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]);

Answer 2

您可以检查 localStorage 中的对象数量并每次递增 id（如果您希望 id 从 1 开始，则加 1）。

$(".store").on("click", function () {
    var mailaddress = localStorage.getItem("mailaddress");
    var obj = [];
    if (mailaddress) {
        obj = JSON.parse(mailaddress);
    }
    var id = obj.length + 1; // increment the id
    var mail = $('#mail').val(); // get the textbox value
    obj.push({ // push it to obj
        "id": id,
        "mail": mail
    });
    localStorage.setItem("mailaddress", JSON.stringify(obj));
});

小提琴： http://jsfiddle.net/w3uu6y0r/3/