如何在通过 localStorage 传递后在另一个网页上打印列表？
这是我的 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回答
-
喵喵时光机
感谢您更新您的帖子并包含 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>";}
随时随地看视频慕课网APP
相关分类
Html5