javascript - 如何将 LocalStorage 功能添加到我的 TODO 列表中。如何以及在什么时候？

Question

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

这是我的代码笔: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/localStorage

所以首先你需要用本地存储保存一个任务，这是你需要使用的:

localStorage.setItem

您可以使用 task0、task1、task2 等名称保存它，当然还有该任务的文本值。

然后您将需要一个循环遍历以任务开头的每个本地存储。这并不难，我会让您自己尝试(最好的学习方式 ;))。

因此，您已经拥有的大部分代码都将消失。您在这里所做的只是在添加任务时添加一些 dom 元素。您将不得不添加带有循环的那些，并在将任务添加到 localstorage 时再次运行该循环。

如果您需要更多详细信息，请在评论中询问；)

提示:ReactJS 非常适合这个，但在 vanilla JS 中也是可能的。