Question

我正在尝试构建一个逻辑，我们单击一个按钮并在localStorage中保存一个ID。我们最多可以有2个。但是，我们也可以从中删除ID并添加新ID。最后，我们不能添加超过2个，这些ID必须是唯一的。然后将这些ID设置为表单中的输入值。

所以我有四个步骤页面：

主页
搜索结果页
单篇文章页
表单结果页

每个页面都有：

<form id="post_form_id" method="post" action="/test/compare/"> 
   <input id="input_post_id" type="hidden" name="varPostId" value=""> 
   <button type="submit" class="btn btn-link nav-link" id="jikubox"></i> 
   <span class="badge badge-secondary">0</span></button>
</form>

已保存的ID将在name="varPostId" value=""

中设置

现在这个棘手的部分令我感到困惑，所以localStorage只能strings所以首先每个页面加载我这样做：

var lines = localStorage.getItem("lines") ? 
JSON.parse(localStorage.getItem("lines")) : [];

然后，因为在文章页面中我有一个save button来添加数组中的当前文章ID，我这样做：

<button type="button" class="save_post">SAVE</button>

JS

$(".save_post").on("click", function(e) {
  e.stopImmediatePropagation();
  if (localStorage.getItem("attempts") >= 2) { 
    alert('nope'); 
    return; 
  } else {

  // Here I set the id for each article which I saved before via php in a span 
    var thisId = $(".my_post_id").attr("data-id");

    var lines = localStorage.getItem("lines") ? JSON.parse(localStorage.getItem("lines")) : []; 
    lines.push(thisId);
    localStorage.setItem("lines", JSON.stringify(lines));
    console.log(lines);
    $("#input_post_id").val(JSON.parse(localStorage.getItem("lines")));
    var attempts = Number(localStorage.getItem("attempts"));
    localStorage.setItem("attempts", ++attempts);
    console.log(localStorage.getItem("attempts"));
    $("#jikubox span").text(localStorage.getItem("attempts"));
  }
});

注意我有另一个localStorage：attempts，用于添加或删除我在计数器徽章中设置的数字，基本上是一个指示器，用于说明我在“ 中有多少项目袋 ”。 请记住：最多2位且唯一。

最后在 表单结果页面 上我有一个按钮来删除添加的项目，并使用以下js：

$(".removeJiku").on("click", function(){

  // Here I set the id for each article, I do that with php
  // <span  class="removeId" data-thisPostId="<?php echo $idThisPost; ?>"></span>

  var removeThisId = $(".removeId").attr("data-thisPostId");
  $(this).parent().fadeOut();
  var attempts = Number(localStorage.getItem("attempts"));
  localStorage.setItem("attempts", --attempts);
  $("#jikubox span").text(localStorage.getItem("attempts"));
  lines.splice($.inArray(removeThisId, lines), 1);
  localStorage.getItem("lines", lines); 
  localStorage.setItem("lines", lines); 
  console.log(localStorage.getItem("lines"));
});

逻辑有点好，但在我尝试几次之后，我最终变空lines array并且ids未设置为input value。我认为我过于复杂的逻辑，我想知道在哪里以及如何简化和纠正它。我正在研究一个通用的代码，它可以处理所有这些，而不会使逻辑复杂化。

更新

感谢您的回答，我们已经简化了一段代码，并通过检查counter中的ID长度来设置lines array，这样我们就可以删除 attempts local storage逻辑的整个代码

$("#jikubox span").text(lines.length);

Answer 1

假设您将ID存储在数组中 -

var idList=["123","456"];

您可以存储这样的ID -

localStorage.setItem("idList",JSON.stringify(idList));

并像这样获取idList -

JSON.parse(localStorage.getItem("idList")).length

请务必确保全面验证。

P.S。无需计算“尝试”，因为您可以随时使用以下代码来查找idList的长度，可以是2或任何您想要的数字

JSON.parse(localStorage.getItem("idList")).length

<强>更新

删除ID-

function removeId(array, element) {
    const index = array.indexOf(element);
    array.splice(index, 1);
}

从localStorage获取数组并将其传递给此函数 -

idList  = JSON.parse(localStorage.getItem("idList"))

并像这样调用函数 -

 removeId(idList,idToBeDeleted)

Answer 2

这个区块没有做你想做的事情：

lines.splice($.inArray(removeThisId, lines), 1);
localStorage.getItem("lines", lines); 
localStorage.setItem("lines", lines);

第二行是从localStorage获取一些东西但是没有做任何事情。它可能相当于

lines.splice($.inArray(removeThisId, lines), 1);
['one line', 'another line'];
localStorage.setItem("lines", lines);

只是一些随机值会被解释器忽略。

另一个问题是，您将localStorage.lines设置为普通lines变量，设置为 JSON.stringify(lines)。

请注意，只需执行

即可简化语法噪音

localStorage.lines = JSON.stringify(lines);

和

const lines = JSON.parse(localStorage.lines || '[]');

Answer 3

localStorage.getItem('item')只接受一个参数，如果该值存在于本地存储中并且将返回null项不存在，则返回该值。

localStorage.setItem(item, value)接受两个参数。作为键的项和要为键保存的值。如果已设置项目，则会覆盖该值。

如何在localStorage中添加和删除项目？

3 个答案: