Question

Javascript push() 替换元素而不是附加元素

2015-12-13

1424

javascript arrays local-storage

这是我用 Javascript 编写的函数，用于将单词添加到 本地存储 。如果您想知道，这是我为简单的字典查找网站构建 搜索历史记录 功能的尝试。

function add2local(entry){
    var l = localStorage.length;

if(l==0){
    var lu = [entry];
    localStorage.setItem("w", JSON.stringify(lu));
}
else {
    var lu = JSON.parse(localStorage.getItem("w")); alert(lu);
    lu.push(entry); alert(lu);
}}

我的理解是，每次调用此函数时，它都会将其参数附加到本地存储。因此，第一次调用它时，我向其发送单词 pirate 。它会按预期添加到数组中，然后添加到本地存储中。第一个 alert() （alert() 函数仅用于测试）证实了这一点。第二次，我用单词 vampire 调用它。现在，按照函数的逻辑， vampire 应该附加到数组，因此第二个 alert() 应该输出“pirate, vampire”。确实如此。

但第三次，比如说，我使用单词 foo 调用该函数。这一次，它应该输出“pirate, vampire, foo”，但却显示“pirate, foo”。每次后续调用都只是用新单词替换第二个单词，而不是将其附加。我在这里可能做错了什么？我误解了 push() 的工作原理吗？

Answer 1

if 条件和逻辑不正确； localStorage 有多少个项目并不重要，但重新保存修改后的数组非常重要。

无论如何，我怀疑实现可能看起来像这样：

function add2local(entry){
    // load entries - if there are none, we simulate an empty array to load
    var lu = JSON.parse(localStorage.getItem("w") || "[]");
    // add new entry
    lu.push(entry);
    // write back - so change is not lost between function calls
    localStorage.setItem("w", JSON.stringify(lu));
    // return all local entries saved - for use from the caller
    return lu;
}

Answer 2

为什么要检查存储长度？你不关心。获取密钥，如果为空，则默认为空数组。

function add2local (entry) {
  var key = "w"
  var value = localStorage.getItem(key)
  if (value) {
    value = JSON.parse(value)
  } else {
    value = []
  }
  value.push(entry)
  localStorage.setItem(key, JSON.stringify(value))
}