javascript - 如何设置一个包含可移动项目的列表，该列表将自身存储在 javaScript 的 localStorage 中

Question

我一直在开发一个小项目，我需要将一些值存储在数组中，即使页面重新加载，这些值也会始终显示，并且可以通过按按钮将其删除。

我的想法是将数组存储在 localStorage 中，每次加载页面时，它们都会下载到 javascript 数组中。 这似乎工作完美，但当我试图通过按下按钮删除它们时，我的问题就出现了。我知道我的代码中的问题出在哪里，我只是不知道如何做到这一点才能使其正常工作。

问题是，在我删除索引较低的项目后，它会影响我以后删除索引较高的项目的能力。

代码如下:

var input = document.getElementById("text");
var displayed = input.value;
var a = [];

function check() {

  if (localStorage.session == null) {
    a.push(JSON.parse(localStorage.getItem('session')));
    a.splice(0, 1);
    localStorage.setItem('session', JSON.stringify(a));

  }
}

function SaveDataToLocalStorage() {

  a = JSON.parse(localStorage.getItem('session'));
  if (input.value !== "input") {
    a.push("<p>" + input.value + " </p><button onclick='Delete(" + (a.length - 1) + ")'>Delete</button><br />");
  } else {
    displayed = "";
  }
  localStorage.setItem('session', JSON.stringify(a));
  document.getElementById("Demo").innerHTML = a.join("");
}

function Delete(deleted) {
  var index = deleted;
  a.splice(deleted, 1);
  localStorage.setItem('session', JSON.stringify(a));
  document.getElementById("Demo").innerHTML = a.join("");

}

check();
SaveDataToLocalStorage();

<input type="text" name="input" value="input" id="text">
<button onclick="SaveDataToLocalStorage()">Click</button>
<div id="Demo">
 

如果有人能提供帮助，那就太棒了!

Answer 1

我没有测试代码，但我认为这可以帮助你!

var input = document.getElementById("text");
var displayed = input.value;
var a = [];

function check() {
  if (localStorage.session == null) {
    a.push(JSON.parse(localStorage.getItem('session')));
    a.splice(0, 1);
    localStorage.setItem('session', JSON.stringify(a));
  }
}

function SaveDataToLocalStorage() {
  a = JSON.parse(localStorage.getItem('session'));
  if (input.value !== "input") {
    a.push({
      index: a.length,
      data: "<p>" + input.value + " </p><button onclick='Delete(" + a.length + ")'>Delete</button><br />"
    });
  } else {
    displayed = "";
  }
  localStorage.setItem('session', JSON.stringify(a));
  document.getElementById("Demo").innerHTML = a.join("");
}

function Delete (deleted) {
  a = a.filter(function (e) { return e.index !== deleted })
  localStorage.setItem('session', JSON.stringify(a));
  document.getElementById("Demo").innerHTML = a.join("");
}

check();
SaveDataToLocalStorage();

<input type="text" name="input" value="input" id="text">
<button onclick="SaveDataToLocalStorage()">Click</button>
<div id="Demo">