在 Javascript 中创建存储数组，并在每次点击时推送元素 ID答案

【问题标题】：Create Stored Array in Javascript, and push element ID on each click在 Javascript 中创建存储数组，并在每次点击时推送元素 ID
【发布时间】：2016-04-28 18:50:14
【问题描述】：

我试图在单击元素时将元素 ID 放入一个数组中，并将该数组存储在本地存储中。然后调用这个数组，每次点击一个元素时推送更多的元素ID。结果对我来说比我想象的要棘手。

我正在使用 javascript/jquery。

我的代码：

var reportArray = []
var storedArray = JSON.parse(localStorage.getItem("reportarray"));
if(storedArray == '') {
    reportArray.push("foo");
    localStorage.setItem("reportarray", JSON.stringify(reportArray));
} else {
    reportArray.push(storedArray);
    localStorage.setItem("reportarray", JSON.stringify(storedArray));
}

我意识到这段代码可能有问题（它甚至不能正常工作），但我至少试了一下。请帮忙？

【问题讨论】：

发布一个包含 HTML 和 JavaScript sn-p 的工作示例
这就是问题所在。我不确定如何使它工作。这就是我寻求帮助的原因。
不清楚i3是什么以及GetC和SetC的功能
你能分享GetC和SetC吗？
是的，让我快速编辑代码以澄清

标签： javascript jquery arrays local-storage

【解决方案1】：

API：

function storeId(id) {
    var ids = JSON.parse(localStorage.getItem('reportArray')) || [];

    if (ids.indexOf(id) === -1) {
        ids.push(id);
        localStorage.setItem('reportArray', JSON.stringify(ids));
    }

    return id;
}

该函数将一个 ID 存储在本地存储中。如果本地存储项还不存在，它会创建一个新的数组，否则使用本地存储中的数组。此外，确保 id 在将其推送到存储时不存在。

用法：

$(function () {
    $('.btn').click(function () {
        var id = $(this).attr('id');
        storeId(id);
    });
});

EXAMPLE

【讨论】：

我尝试实现这一点，但在 javascript 控制台中出现错误：Uncaught SyntaxError: Unexpected end of input
查看示例小提琴。它在那里工作。可能是您的实现中的语法错误。
您的小提琴有效，但无论出于何种原因，我完全无法让您的确切代码在我的脚本中工作。我不得不使用 el_tamatoe 的代码来让它工作。谢谢您的帮助！这是非常宝贵的。

【解决方案2】：

我会这样说：

HTML：

<button id="elt1">Elt 1</button>
<button id="elt2">Elt 2</button>
<button id="elt3">Elt 3</button>
<button id="elt4">Elt 4</button>
<button id="elt5">Elt 5</button>

JS：

$(document).ready(function(){
  $('button').click(function(){
    var id = this.id;
    var reportArray = JSON.parse(localStorage.getItem("reportarray")) || [];
    if (!~reportArray.indexOf(id)) reportArray.push(this.id);
    localStorage.setItem("reportarray", JSON.stringify(reportArray));
  });
});

JS（即使已经存在也推送 id）：

$(document).ready(function(){
  $('button').click(function(){
    var id = this.id;
    var reportArray = JSON.parse(localStorage.getItem("reportarray")) || [];
    reportArray.push(this.id);
    localStorage.setItem("reportarray", JSON.stringify(reportArray));
  });
});

【讨论】：

这个工作......除了它只保存一个id，而不是数组中的多个id。看起来很近！
好的。然后只需删除if (!~reportArray.indexOf(id)) 这是为了确保每个id只被推送一次
它似乎仍然不想为我工作。大概是我的错。非常感谢！
真的吗？这很奇怪......我的工作非常好：jsfiddle.net/OxyDesign/yvtkwr4t（我正在尝试使用 Chrome）

【解决方案3】：

如果您需要在本地存储中放置一个 ID，这可能是策略：

var reportArray = localStorage.getItem("reportarray");
if(reportArray != null && reportArray != '') {
    var storedArray = JSON.parse(reportArray);
    storedArray.push("foo");
    localStorage.setItem("reportarray", JSON.stringify(storedArray));
} else {
    var storedArray = ["foo"];
    localStorage.setItem("reportarray", JSON.stringify(storedArray));
}

显然您需要输入 ID 而不是 "foo"。

【讨论】：

最终使用了这个确切的代码，除了用 id 替换 foo 以使其工作。谢谢！

【解决方案4】：

看起来并不遥远。我看到的主要问题是，在 else 子句中，如果 storedArray 已经存在，那么您就不会向它推送任何新元素。在尝试解析之前检查 reportarray 是否为 null 也可能更安全。

【讨论】：

我的想法是，如果它确实存在，那么我可能想用新的元素 ID“更新”它......这不意味着我需要向它推送新元素吗？我愿意承认我可能想错了。
你说每次点击一个元素，你都想把一个元素ID推送到数组中。这就是这段代码没有做的事情。 else 后面的行应该是类似于 storedArray.push("bar");