如何将局部存储功能添加到我的待办事项列表中.如何和在什么点

Question

我想使用js中的本地存储来保存我的待办事项列表项目。但是我无法有效地将其应用于代码。

这是我的Codepen：https：//codepen.io/samimalik/pen/ebrkzv

这是我的html：

    <main id="container">
        <input type="text" class="txt" placeholder="Add a task..." title="Write and press Enter">
        <section class="not-comp">
            <h1>Not Completed</h1>
        </section>
        <section class="comp">
            <h1>Completed</h1>

        </section>
    </main>

这是我的jQuery

    $(document).ready(function() {
            $('.txt').keyup(function(e) {
                if (e.keyCode == 13  && $('.txt').val() != ""){
                    let task = $('<div class="task"></div>').text($('.txt').val());
                    let del = $('<i class="fas fa-trash-alt"></i>');
                    let check = $('<i class="fas fa-check"></i>');
                    $('.not-comp').append(task)
                    $('.txt').val('');
                    task.append(del,check);
                    $('i.fa-trash-alt').click(function() {
                        $(this).parent().fadeOut(function() {
                            $(this).remove();
                        });
                    });
                    $('i.fa-check').click(function() {
                        $(this).parent().fadeOut(function() {
                            $('.comp').append(this).fadeIn();
                        });
                    $(this).remove();
                    });
                };
            });
        });

Answer 1

localstorage不是在这里保存数据的最佳方法，因为当您重新启动浏览器时，一切都会被删除，但是如果您不希望数据为刷新页面时删除。

如果我的某些解释不清楚，请首先查看正式文档：https：//developer.mozilla.org/en-us/docs/web/api/window/window/localstorage

因此，首先要使用LocalStorage保存任务，这是您需要使用的：

localStorage.setItem

您可以用诸如task0，task1，task2，...的名称保存它，然后当然还有该任务的文本值。

然后，您必须需要一个从任务开始的每个局部存储的循环。这并不难，我会让您自己尝试(最好的学习方法;(。

因此，您已经拥有的大多数代码都将消失。您在这里所做的只是添加任务时添加一些DOM元素。您将必须添加那些带有循环的内容，并在将任务添加到LocalStorage时再次运行该循环。

如果您需要在评论中提出更多详细信息;(

提示：ReactJS非常适合此，但在Vanilla Js中也可能。

Answer 2

简单，

保存数据：

localStorage.setItem('todosData', JSON.stringify(your_data_object))

获取数据：

let data = JSON.parse(localStorage.getItem('todosData'));