html 如何将LocalStorage功能添加到我的TODO LIST,如何添加以及在什么时候添加?

7uhlpewt  于 5个月前  发布在  其他
关注(0)|答案(2)|浏览(52)

我想在js中使用本地存储保存我的todo列表项。但我无法有效地将其应用到代码中。
下面是我的代码页: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();
                    });
                };
            });
        });

prdp8dxp

prdp8dxp1#

很简单,
要保存数据,请执行以下操作:

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

字符串
要获取数据,请执行以下操作:

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

0qx6xfy6

0qx6xfy62#

LocalStorage不会是在这里保存数据的最佳方式,因为当您重新启动浏览器时,所有内容都会被删除,但如果您不希望在刷新页面时删除数据,它可能会很有用。
如果我的一些解释不清楚,首先看看官方文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
所以首先你需要用localstorage来保存一个任务,这是你需要用途:

localStorage.setItem

字符串
你可以保存它,命名为task 0,task 1,task 2,.当然还有这个任务的文本值。
然后你需要一个循环来遍历每个以task开头的本地存储。这并不难,我会让你自己尝试(最好的学习方法;))。
所以你在这里已经拥有的大部分代码都将消失。你在这里所做的只是在添加任务时添加一些dom元素。你将不得不使用循环添加这些元素,并在向localstorage添加任务时再次运行该循环。
提示:ReactJS将是一个完美的适合这一点,但它也可能在香草JS。

相关问题