本地存储没有给出正确的结果

Posted 2023-05-07

【中文标题】本地存储没有给出正确的结果

【英文标题】：local storage not giving correct results

【发布时间】：2015-08-25 20:06:57

【问题描述】：

我正在尝试构建便笺。我正在阅读 Head First 系列。 我做了这个代码。 但不知何故，它不起作用。

<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);
        
    

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

【问题讨论】：

Uncaught ReferenceError: span is not defined

@Ok 我删除了那行，但仍然每个注释都是空白的......

function addStickyToPage(value) 你在这个函数中传递了值，但你什么也不做

@o 我该如何解决它..

【参考方案1】：

我已更新您的Fiddle。 注意：首先你应该创建 DOM 元素，然后将 text 附加到这个元素，最后将这个节点附加到你的主体，所以你的代码应该是这样的：

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()带括号

谢谢

【讨论】：

谢谢，但请给我解释一下 var t = document.createTextNode(value);

你刚刚在这里做了什么？

好的，所以你创建了文本...？？

createTextNode 它将您的文本从文本框中附加到您的 sticky here 您可以阅读有关此功能的信息

我可以在这里使用 innerhtml 吗？？