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

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

我的想法是将数组存储在localStorage中，每次页面加载时，它们都会下载到javascript数组中。

---

这似乎工作完美无瑕，但我的问题来时，我试图消除他们按下一个按钮。我知道我的代码中的问题在哪里，我只是不知道如何使它工作

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

代码如下：

var input=document.getElementById（“文本”）；
显示的变量=输入值；
var a=[]；
函数检查（）{
if（localStorage.session==null）{
a、 push（JSON.parse（localStorage.getItem（'session'））；
a、 拼接（0,1）；
setItem（'session'，JSON.stringify（a））；
}
}
函数SaveDataToLocalStorage（）{
a=JSON.parse（localStorage.getItem（'session'）；
如果（输入值！=“输入”）{
a、 按（“”+input.value+”
删除
）；
}否则{
显示=”；
}
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
功能删除（已删除）{
var指数=已删除；
a、 拼接（删除，1）；
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
检查（）；
SaveDataToLocalStorage（）

点击
您的问题在于此

a.push("<p>" + input.value + " </p><button onclick='Delete(" + (a.length - 1) + ")'>Delete</button><br />");

a.push（“”+input.value+”
Delete
）；

您在“删除”按钮中硬编码要删除的索引，但如果您从数组中较早的位置删除某个项，则索引可能会更改

您可以考虑每次数组更改时重新绘制所有内容，包括按钮。
另一种选择是，数组中的每个项都可以有一个ID，当删除以前的项时，ID不会改变。然后，您可以让“delete”函数根据元素的ID从数组中删除元素
还有一个解决方案：让按钮单击函数在单击时检查它自己的索引（例如，检查它是第二个删除按钮还是第九个删除按钮），并从数组中删除它从该检查中获得的索引。这样，您可以保持大部分代码不变，但索引不是硬编码到按钮中，每次都会进行实时检查。
您的问题在于此

a.push("<p>" + input.value + " </p><button onclick='Delete(" + (a.length - 1) + ")'>Delete</button><br />");

a.push（“”+input.value+”
Delete
）；

您在“删除”按钮中硬编码要删除的索引，但如果您从数组中较早的位置删除某个项，则索引可能会更改

您可以考虑每次数组更改时重新绘制所有内容，包括按钮。
另一种选择是，数组中的每个项都可以有一个ID，当删除以前的项时，ID不会改变。然后，您可以让“delete”函数根据元素的ID从数组中删除元素
还有一个解决方案：让按钮单击函数在单击时检查它自己的索引（例如，检查它是第二个删除按钮还是第九个删除按钮），并从数组中删除它从该检查中获得的索引。这样，您可以保持大部分代码不变，但索引不是硬编码到按钮中，每次都会进行实时检查。
我没有测试代码，但我认为这可以帮助您


var input=document.getElementById（“文本”）；
显示的变量=输入值；
var a=[]；
函数检查（）{
if（localStorage.session==null）{
a、 push（JSON.parse（localStorage.getItem（'session'））；
a、 拼接（0,1）；
setItem（'session'，JSON.stringify（a））；
}
}
函数SaveDataToLocalStorage（）{
a=JSON.parse（localStorage.getItem（'session'）；
如果（输入值！=“输入”）{
a、 推({
索引：a.长度，
数据：“”+input.value+”
删除
”
});
}否则{
显示=”；
}
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
功能删除（已删除）{
a=a.filter（函数（e）{返回e.index！==deleted}）
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
检查（）；
SaveDataToLocalStorage（）

点击
我没有测试代码，但我认为这可以帮助您


var input=document.getElementById（“文本”）；
显示的变量=输入值；
var a=[]；
函数检查（）{
if（localStorage.session==null）{
a、 push（JSON.parse（localStorage.getItem（'session'））；
a、 拼接（0,1）；
setItem（'session'，JSON.stringify（a））；
}
}
函数SaveDataToLocalStorage（）{
a=JSON.parse（localStorage.getItem（'session'）；
如果（输入值！=“输入”）{
a、 推({
索引：a.长度，
数据：“”+input.value+”
删除
”
});
}否则{
显示=”；
}
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
功能删除（已删除）{
a=a.filter（函数（e）{返回e.index！==deleted}）
setItem（'session'，JSON.stringify（a））；
document.getElementById（“Demo”）.innerHTML=a.join（“”）；
}
检查（）；
SaveDataToLocalStorage（）

点击
“我知道我的代码中的问题在哪里”--好的，它在哪里？对不起，问题是当我从数组中删除一个项目时，数组长度会变小，因此，例如，如果我从9中删除数字8，数组长度突然变为8，而9是不可删除的。听起来……这正是您希望发生的。如果你有9项，删除第8项，那么之后的长度将是8项。是的，但这更多的是一个临时解决方案，不起作用。我想要的是能够随时删除任何内容。那么比如说,，