Почему мой localStorage не работает с JSON?

Question

Почему мой localStorage не работает с JSON?

1

Я начал программировать список ToDo, но я не могу сохранить значения todos. Я могу сэкономить, сколько там стоит, а потом я могу вернуться, но он показывает мне только значение [object HTML collection]. Я сделал это с помощью функции JSON.stringify(), а затем в локальном хранилище и для извлечения todos я использовал JSON.parse. Я пробовал это по-разному, но это не сработает. Кто-нибудь может мне помочь?

function save(){
    var alle = document.getElementById("liste");
    var inhalt = alle.querySelectorAll("p");
    var inhalte = document.getElementsByClassName("text");
    var speichern = JSON.stringify(inhalte);


    i = 0;
    while(i < inhalt.length){
        localStorage.setItem("Todo", speichern);
        i = i+1;
    };

};

function Aufrufen(){
    var inhalte = document.getElementsByClassName("text");
    var abrufen = localStorage.getItem("Todo");
    var obiekt = JSON.parse(abrufen);
    var alle = document.getElementById("liste");
    var inhalt = alle.querySelectorAll("p");
    var anzahl = Object.keys(obiekt).length;
    var i=0;

    while(i < anzahl) {
        var alle = document.getElementById("liste");
        var zeigen = document.getElementById("zeigen");
        var aktiv = document.getElementById("aktiv");
        var deaktiv = document.getElementById("deaktiv");
        var todo = document.createElement("p");
        var löschen = document.createElement("button");
        var text = document.createElement("input");
        var checkbox = document.createElement("input");
        var textlöschen = document.createTextNode("X");
        var obiekt = JSON.parse(abrufen);

        todo.className="todo";
        checkbox.type = "checkbox";
        checkbox.className="box";
        text.type="text";
        text.className="text";
        löschen.className="löschen";
        text.value=obiekt[i];

        alle.appendChild(todo);
        todo.appendChild(checkbox);
        todo.appendChild(text);
        todo.appendChild(löschen);
        löschen.appendChild(textlöschen);

        i=i+1;
        offen=offen+1;
        document.getElementById("offen").innerHTML = offen;

        löschen.addEventListener("click", function(){
            var parent = document.getElementById("liste");
            parent.removeChild(todo);
            if((checkbox.checked)==false){offen=offen-1;
            document.getElementById("offen").innerHTML = offen;}
        });

        checkbox.addEventListener("click", function(){
                var todotext = this.parentElement.getElementsByClassName("text").item(0);
                if((this.checked)==true){
                    todotext.style.textDecoration = "line-through";
                    offen=offen-1;
                    document.getElementById("offen").innerHTML = offen;
                    if(x==1){this.parentElement.style.display = "none"}
                }

                else if((this.checked)==false){
                    todotext.style.textDecoration = "none";
                    offen=offen+1;
                    document.getElementById("offen").innerHTML = offen;
                    if(x==2){this.parentElement.style.display = "none"}
                }
        }); 

    };
};

ITtrainee 21 сен. 2017, в 11:04

Источник

0

Поделитесь релевантным HTML здесь
Parag Jadhav 21 сен. 2017, в 09:02
0

Вы не можете сериализовать объект HTMLColletion.
Teemu 21 сен. 2017, в 09:04
0

Я могу ошибаться, но löschen , вероятно, неверен как имя переменной, не так ли? (это, вероятно, не связано с самой основной проблемой)
YakovL 21 сен. 2017, в 09:22

Показать ещё 1 комментарий

Теги:

javascript

json

2 ответа

3

var inhalte = document.getElementsByClassName("text");
var speichern = JSON.stringify(inhalte);

Вы пытаетесь преобразовать живой HTMLCollection в строку.

Посмотрите, что произойдет, когда вы это сделаете:

var inputs = document.getElementsByClassName("foo");
var json = JSON.stringify(inputs);
console.log(json);

<input class="foo"><input class="foo"><input class="foo"><input class="foo">

Там нет никакой полезной информации.

Вам нужно извлечь нужные данные и поместить их в разумную структуру данных.

Например, вы можете перебрать некоторые элементы ввода и создать массив своих значений (а затем передать этот массив через JSON.stringify)

Когда вы читаете JSON и возвращаетесь в другую сторону, вам нужно будет генерировать HTML-элементы из данных.

Quentin 21 сен. 2017, в 06:29

Ещё вопросы

Вы не можете сериализовать объект HTMLColletion.
Я могу ошибаться, но löschen , вероятно, неверен как имя переменной, не так ли? (это, вероятно, не связано с самой основной проблемой)

dhbalaji · Accepted Answer · 2017-09-21T08-06-00.000Z

Ваш подход к решению проблемы неверен. Вы пытаетесь сохранить выбранные элементы DOM в localstorage.

Вместо,

выберите элемент DOM.
Прочтите его текстовое содержимое.
Сохраните содержимое текста в массиве.
Строка массива
Сохраните массив в localStorage.

Код для чтения текстового содержимого

var x = document.getElementsByClassName("example");
x[0].innerHTML //Contains the text value which you can use

большое спасибо! сейчас работает