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并不是在此处保存数据的最佳方法，因为在重新启动浏览器时所有内容都会被删除，但是如果您不希望在刷新页面时删除数据，这将非常有用。 / p>

如果我的某些解释不清楚，请先查看官方文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

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

localStorage.setItem

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

然后，您将需要一个遍历以任务开始的每个本地存储的循环。这并不难，我会让你自己尝试一下（最好的学习方法；））。

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

如果您需要更多详细信息，请在评论中提问;）

提示：ReactJS将非常适合此操作，但是在普通JS中也是可能的。

Answer 2

简单

要保存数据：

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

要获取数据：

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

如何将LocalStorage功能添加到我的待办事项列表。如何以及在什么时候？

2 个答案: