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

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();
                    });
                };
            });
        });

标签： javascriptjqueryhtmlcss

Answer 1

简单的，

保存数据：

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

获取数据：

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