不能将待办事项存储到本地存储

Can't store todos to local storage

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

我现在正在学习JavaScript，我正在做的一个实践应用程序是制作一个待办事项列表来学习基础知识。现在我很难将输入保存到本地存储器中。我查看了浏览器的控制台和本地存储，只看到正在创建一个键"todos"，但没有在其中存储任何值。

我想知道是否有人可以帮忙。请忽略我编写代码的方式。我还在学习。(我知道有更好、更有效的方法来制作待办事项清单。)

我代码:

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

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

因此，键'todos'将始终以空字符串作为其值。

为了能够在你想要的localStorage变量中保存你最后输入的内容，你只需要在clearInput()调用之前移动saveTodos()调用。

然而，您的用例表明，您肯定希望保存的不仅仅是最后输入的输入，而是几个待办事项。要实现这一点，您必须为每个条目使用单独的键，或者将所有条目作为一个数组。由于LocalStorage只支持字符串值，因此必须使用JSON.stringify

也许在调用saveTodos();之前注释掉clearInput();将解决您的问题。:)

相关文章：