Question

我已经开始编写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"}
                }
        }); 

    };
};

Answer 1

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

您正在尝试将实时HTMLCollection转换为字符串。

看看你这样做会发生什么：

＆＃13;

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

＆＃13;

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

＆＃13;

那里没有有用的信息。

您需要提取所需的数据并将其置于合理的数据结构中。

例如，您可以遍历某些输入元素并创建其值的数组（然后通过JSON.stringify传递该数组）

当您阅读JSON并以其他方式返回时，您需要从数据中生成HTML元素。

Answer 2

您解决问题的方法不正确。您正在尝试将选定的DOM元素保存到localstorage。

相反，

选择DOM元素。
阅读其文字内容。
将文本内容保存到数组。
对数组进行字符串化
将数组保存到localStorage。

阅读文字内容的代码

Dell;Hp

为什么我的localStorage不能使用JSON？

2 个答案: