这是我的 home.html 代码。我按下了另一个 .html 文件中的按钮。名称被添加并存储在另一个文件的数组中，并通过 localStorage 传递并在 home.html 中解析。然后我循环遍历数组来打印名称。我的问题是在服务器上的网页上显示名称，但在我提交名称后，它会替换网页上以前的名称。它并不是列出一个名字后面跟着另一个名字的列表。我可以使用 javascript 添加一些内容，这样名称就不会不断更新或刷新吗？谢谢！home.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> Home Page </title> {% extends "navigation.html" %} {% block content %} <p> List of Names: </p> <ul id="List"></ul> </head> <body> <script> var LL = JSON.parse(localStorage.getItem("newList1")); document.getElementById("List").innerHTML += "<li>" + LL[LL.length-1] + "</li>"; </script> </body> {% endblock %} </html><!DOCTYPE html><html><head> <meta charset="UTF-8"> <title> Add Name Page </title> {% extends "navigation.html" %} {% block content %} <p> Add a name: </p> <form action="home.html"> <input type='text' input name='name' id='addname'> <input type="button" id="add" value="Submit" onclick="passVal()"> </form> <ul id="nameList"></ul>add_name.html</head> <body> <script> function passVal() { newList = []; var newName = document.getElementById("addname").value; newList.push(newName); //Note: push in javascript assigns value to newList. If I set this to a variable, it would only store the number of elements in that list localStorage.setItem("newList1", JSON.stringify(newList)); } </script> </body> {% endblock %}</html>
1 回答
喵喵时光机
TA贡献1846条经验 获得超7个赞
感谢您更新您的帖子并包含 add_name.html 文件。主要问题就在那里。passVal 函数中所做的就是启动一个新数组，然后向该数组添加一个值，然后将本地存储中的列表设置为该数组。因此本地存储中的数组始终只有一项。
您不应将 newList 变量设置为空数组，而应将其设置为本地存储中已有的项目列表：
添加名称.html
<script>
function passVal() {
var previousValue = localStorage.getItem("newList1"); // Get the previous value
var newList;
if(previousValue) {
newList = JSON.parse(previousValue);
} else {
newList = []; // If nothing is in the local storage until now, start with an empty list.
}
var newName = document.getElementById("addname").value;
newList.push(newName);
localStorage.setItem("newList1", JSON.stringify(newList));
}
</script>
</body>
{% endblock %}
然后在 home.html 中，您需要循环遍历这些值：
var LL = JSON.parse(localStorage.getItem("newList1"));
for(let item of LL) {
document.getElementById("List").innerHTML += "<li>" + item + "</li>";
}
- 1 回答
- 0 关注
- 104 浏览
添加回答
举报
0/150
提交
取消