我想在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();
});
};
});
});
型
2条答案
按热度按时间prdp8dxp1#
很简单,
要保存数据,请执行以下操作:
字符串
要获取数据,请执行以下操作:
型
0qx6xfy62#
LocalStorage不会是在这里保存数据的最佳方式,因为当您重新启动浏览器时,所有内容都会被删除,但如果您不希望在刷新页面时删除数据,它可能会很有用。
如果我的一些解释不清楚,首先看看官方文档:https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
所以首先你需要用localstorage来保存一个任务,这是你需要用途:
字符串
你可以保存它,命名为task 0,task 1,task 2,.当然还有这个任务的文本值。
然后你需要一个循环来遍历每个以task开头的本地存储。这并不难,我会让你自己尝试(最好的学习方法;))。
所以你在这里已经拥有的大部分代码都将消失。你在这里所做的只是在添加任务时添加一些dom元素。你将不得不使用循环添加这些元素,并在向localstorage添加任务时再次运行该循环。
提示:ReactJS将是一个完美的适合这一点,但它也可能在香草JS。