Как распечатать список на другой веб-странице после передачи его с localStorage? - PullRequest
Новая
       3

Как распечатать список на другой веб-странице после передачи его с localStorage?

1 голос
/ 04 апреля 2020

Это мой дом. html код. Я нажал кнопку в другом файле. html. Имена добавляются и сохраняются в массиве в другом файле, передаются через localStorage и анализируются в home. html. Затем я перебрал массив, чтобы напечатать имена. Моя проблема находится на веб-странице на сервере, где отображаются имена, но после того, как я отправляю имя, оно заменяет предыдущее имя на веб-странице. Это не создание списка с одним именем, за которым следует другое. Что я могу добавить с javascript, чтобы имена не обновлялись и не обновлялись? Спасибо! 

home.html


<!DOCTYPE html>
        <html lang="en">
        <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 lang="en">
<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 Ответ

1 голос
/ 04 апреля 2020

Спасибо за обновление вашего сообщения и добавление файла add_name. html. Основная проблема лежит там. Что вы делаете в функции passVal, это запускаете новый массив, затем добавляете одно значение в массив и затем устанавливаете список в локальном хранилище для этого массива. Поэтому массив в локальном хранилище всегда имеет только одну запись.

Вместо того, чтобы устанавливать переменную newList в пустой массив, вы должны установить его в список элементов, которые уже находятся в локальном хранилище:

add_name. 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 %}

Затем в доме. html, вам необходимо l oop через значения: 

var LL = JSON.parse(localStorage.getItem("newList1"));
for(let item of LL) {
    document.getElementById("List").innerHTML += "<li>" + item + "</li>";
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...