這是我的 home.html 代碼。我按下了另一個 .html 文件中的按鈕。名稱被添加并存儲在另一個文件的數(shù)組中，并通過 localStorage 傳遞并在 home.html 中解析。然后我循環(huán)遍歷數(shù)組來打印名稱。我的問題是在服務器上的網(wǎng)頁上顯示名稱，但在我提交名稱后，它會替換網(wǎng)頁上以前的名稱。它并不是列出一個名字后面跟著另一個名字的列表。我可以使用 javascript 添加一些內(nèi)容，這樣名稱就不會不斷更新或刷新嗎？謝謝！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條經(jīng)驗 獲得超7個贊
感謝您更新您的帖子并包含 add_name.html 文件。主要問題就在那里。passVal 函數(shù)中所做的就是啟動一個新數(shù)組，然后向該數(shù)組添加一個值，然后將本地存儲中的列表設(shè)置為該數(shù)組。因此本地存儲中的數(shù)組始終只有一項。
您不應將 newList 變量設(shè)置為空數(shù)組，而應將其設(shè)置為本地存儲中已有的項目列表：
添加名稱.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 中，您需要循環(huán)遍歷這些值：
var LL = JSON.parse(localStorage.getItem("newList1"));
for(let item of LL) {
document.getElementById("List").innerHTML += "<li>" + item + "</li>";
}
- 1 回答
- 0 關(guān)注
- 160 瀏覽
添加回答
舉報
0/150
提交
取消