javascript - 无法删除本地存储元素
问题描述
我有一个简单的本地存储应用程序。在我的应用程序中,用户可以创建包含新任务的无序列表。这个应用程序的最后一个元素是本地存储。我有这个功能的问题。
在我保存项目之前,localstorage
我可以使用按钮删除它们。我不知道为什么,但保存元素后它不起作用。
知道如何解决吗?
我的代码:
const first= document.getElementById("first");
const second= document.getElementById("second");
function addList(e) {
const newElement = document.createElement("li");
newElement.innerHTML = first.value + second.value;
}
newElement.innerHTML += "<button> X </button>";
ul.appendChild(newElement);
store();
newElement.querySelector("button").addEventListener("click", removeElement);
}
function removeElement(e) {
e.target.parentNode.remove();
}
function store() {
window.localStorage.myitems = ul.innerHTML;
}
function getValues() {
let storedValues = window.localStorage.myitems;
if(storedValues) {
ul.innerHTML = storedValues;
ul.querySelector("button").addEventListener("click", removeElement);
}
}
getValues();
<div class="container">
<form>
<input type="text" id="first" name="artist" placeholder="Artist" />
<input type="text" id="second" name="title" placeholder="Song title" />
<button type="button" onclick="addList(event)">Add task</button>
</form>
</div>
<div class="li-elements">
<ul class="list"></ul>
</div>
解决方案
看起来你只是在你的代码中遗漏了一些小东西。从 localStorage 加载时,您没有正确添加 removeElement 事件侦听器,并且您没有正确更新 localStorage。我已经更新了你的代码,所以它可以工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="container">
<form>
<input type="text" id="first" name="artist" placeholder="Artist" />
<input type="text" id="second" name="title" placeholder="Song title" />
<button type="button" onclick="addList(event)">Add task</button>
</form>
</div>
<div class="li-elements">
<ul id="list" class="list"></ul>
</div>
<script>
function addList(e) {
const first = document.getElementById("first");
const second = document.getElementById("second");
const newElement = document.createElement("li");
newElement.innerHTML = first.value + second.value;
newElement.innerHTML += "<button> X </button>";
document.getElementById("list").appendChild(newElement);
store();
newElement.querySelector("button").addEventListener("click", removeElement);
}
function removeElement(e) {
e.target.parentNode.remove();
store();
}
function store() {
window.localStorage["myitems"] = document.getElementById("list").innerHTML;
}
function getValues() {
let storedValues = window.localStorage["myitems"];
if (storedValues) {
let ul = document.getElementById("list");
ul.innerHTML = storedValues;
for (i = 0; i < ul.childNodes.length; i++) {
ul.childNodes[i].querySelector("button").addEventListener("click", removeElement);
}
}
}
getValues();
</script>
</body>
</html>
推荐阅读
- reactjs - 如何使用 React 检测、存储和显示链接
- ruby-on-rails - 在 webpacker react 应用程序中读取 rails 加密凭据
- javascript - JavaScript 中的甜蜜警报消息显示一瞬间
- sql - 如何从查询中排除某些值 [SQL]
- c# - 从 C# Asp.Net Core 调用 Powershell 脚本 - 在测试服务器上没有得到结果(Windows Server 2019)
- javascript - HTML5 和 JavaScript 中每个音频播放器的音量滑块
- spring - @DataJpaTest 加载上下文,因此在缺少 bean 时失败
- postgresql - org.postgresql.util.PSQLException:设置 GSS 编码连接时出错。在 Postgres/Greenplum 上连接时出错
- pytorch - 访问 nn.Sequential 的类模块中的函数
- sql - 更新时触发 SQL