localStorage - 多值

Question

我有一个名为 "mail" 的输入字段。我想将邮件地址和 ID 添加到本地存储中。邮件地址的值应来自输入字段 "mail" 并且每次我添加邮件地址时，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 是一个遍历数组的函数，returns 是一个新数组，其值来自每个 return 语句。所以如果你有一个 [1,2,3] 和运行 [1,2,3].map(function(v) { return v + 1; }); 的数组，你就会有 [2,3,4]。我在这种情况下使用它来获取 id 数组。 parseFloat 可能是不必要的，但我对本地存储持谨慎态度。

Math.max 通常可用于 return 两个或多个值之间的最大值：Math.max(2, 5) 将 return 5。在这种情况下，我使用申请所以我可以传递一个数组。它与以下内容相同：Math.max.apply(null, [2,5]);

Answer 2

你可以查看localStorage中对象的个数，每次id递增（加1，如果你想让id从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));
});

Fiddle: http://jsfiddle.net/w3uu6y0r/3/

localStorage - 多值

localStorage - Multiple Values

javascript

jquery

local-storage