本地存储不能给出正确的结果

local storage not giving correct results

本文关键字：结果 存储 不能      更新时间：2023-09-26

我正在尝试建立post it notes。我在读《头第一丛书》。我写了这段代码。但不知怎么的，就是不行。

<form action="post">
    <input id="note_text" type="text" placeholder="enter your Note">
    <input type="button" id="add_button" value="Add Note">
</form>
<ul id="postItNotesList">
    <li>This is my very first note.</li>
    <li>This is my very Second note.</li>
</ul>
这里是Js 
window.onload=init;
// Add Sticky to Page
function addStickyToPage(value) {
    var sticky = document.createElement("li");
    span.setAttribute("class", "sticky");
    document.getElementById("postItNotesList").appendChild(sticky);
}

// Create and get Sticky Note into the localStorage
function createSticky() {
    var value = document.getElementById("note_text").value;
    var key = "sticky_" + localStorage.length;
    localStorage.setItem(key, value);
    addStickyToPage(value);
}

function init() {
    var button = document.getElementById("add_button");
    button.onclick = createSticky;

    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        if (key.substring(0, 6) == "sticky") {
            var value = localStorage.getItem(key);
            addStickyToPage(value);
        }
    }

}

所以我做了一个小提琴，这样你可以很容易地检查出来这里是小提琴请告诉我哪里做错了。谢谢。

我已经更新了你的提琴。注意:首先你应该创建DOM元素，然后追加文本到这个元素，最后追加这个节点到你的身体，所以你的代码应该像这样:

window.onload=init();
    function addStickyToPage(value) {
        var sticky = document.createElement("li");
        sticky.setAttribute("class", "sticky");
        var t = document.createTextNode(value);
        console.log(t);
        sticky.appendChild(t);
        document.getElementById("postItNotesList").appendChild(sticky);
    }

还有windows.onload = init()和括号

谢谢

相关文章：