Question

我现在正在学习JavaScript，而我正在做的一个练习应用就是制作一个待办事项清单来学习基础知识。现在，我很难将输入保存到本地存储上。我查看了浏览器的控制台和本地存储空间，只看到一个键＆＃34; todos＆＃34;正在创建，但没有值存储在其中。

我想知道是否有人可以提供帮助。请忽略我编码的方式。我仍在学习。（我知道有更好，更有效的方法来制作待办事项清单。）

我的代码：

<body>
<header class = "centerAlign ">to-do list </header>
    <div class = "divA centerAlign input-group container" style = "list-style-type:none">
    <input class = "form-inline input-lg" id="itemInput" "type="text" placeholder="add things to do"/>
    <button class = "addButt btn btn-lg">
        <span class="glyphicon glyphicon-plus"></span>
    </button>

    <ul class = "ulist1 container">
        <!--List items gets inserted here-->
    </ul>
</div>
<button class = "clearAll btn">Clear localStroage</button>

<script>
    getTodos();

    //press enter to submit
    $("input").on('keydown',function(e){
        if(e.keyCode ==13){
            $("<li>").attr("class","apples").html(itemInput.value).fadeIn().appendTo(".ulist1");
            $("<button>").attr("class","doneButt btn pull-left glyphicon glyphicon-ok").appendTo($(".apples").last());
            $("<button>").attr("class","delButt btn pull-right glyphicon glyphicon-trash").appendTo($(".apples").last());
            clearInput();
            saveTodos();
            }
    });

    //click the submit button
    $(".addButt").click(function(){
        $("<li>").attr("class","apples ").html(itemInput.value).fadeIn().appendTo(".ulist1");
        $("<button>").attr("class","doneButt btn pull-left glyphicon glyphicon-ok").appendTo($(".apples").last());
        $("<button>").attr("class","delButt btn pull-right glyphicon glyphicon-trash").appendTo($(".apples").last());
        clearInput();
        saveTodos()

    }); 

    //clears the input box for new text
    function clearInput(){
        itemInput.value = "";
    }

    //button to delete
    $(".ulist1").on("click", ".delButt", function(e) {
        e.preventDefault();
        $(this).parent().fadeOut(function(){
            $(this).remove();});
    });

    //put a line through the text and undo that line
    $(".ulist1").on("click", ".doneButt", function(e) {
        $(this).parents("li").toggleClass('withline');
    });

    //save data localStorage
    $(".addButt").click(function(){
    saveTodos();
    });

    function saveTodos(){
    localStorage.setItem("todos", itemInput.value);
    }

    //get data from localStorage
    function getTodos(){
    localStorage.getItem("todos");
    }

</script>

<script>//delete localstroage
$(".clearAll").click(function() {
    window.localStorage.clear();
    location.reload();
    return false;
    });

</script>

Answer 1

在致电clearInput();之前评论saveTodos();可能会解决您的问题。：）

Answer 2

在调用saveTodos（）之前调用自己的clearInput（）函数。这意味着您首先清除输入字段，然后将（现在为空）输入字段的值保存到本地存储。

因此，您将始终使用空字符串作为其值的“todos”键。

为了能够将您最后输入的输入保存在所需的localStorage变量中，您只需要在clearInput（）调用之前移动saveTodos（）调用。

但是，您的用例表明您确实希望保存的不仅仅是最后输入的输入，还有几个待办事项。要实现这一点，您必须为每个条目或故事使用单独的键作为数组的所有条目。由于LocalStorage仅支持String值，因此您必须使用JSON.stringify

之类的内容

无法将待办事项存储到本地存储

2 个答案: