Question

jQuery中的待办事项列表

我已经按照这个关于如何在jQuery中创建待办事项列表的优秀教程：

http://www.youtube.com/watch?v=SkmF8eUOUrE

我已经通过删除添加和删除任务的能力来稍微调整它（因此简化了它）。相反，列表将由数据库填充并经常更新。用户将能够查看此任务列表并勾选他们已完成的任务。因此，每个用户都有相同的任务列表，但他们都可以检查自己在该任务列表上的个人进度。

问题

缺少的部分是让浏览器记住用户已完成的任务。当用户勾选列表中的项目并刷新页面时，列表将刷新，忘记完成的任务。

问题

解决此问题的最佳方法是什么？我正在考虑使用cookie，但是我是否需要为每项任务使用不同的cookie？待办事项列表将定期更新，因此理论上我们可能需要创建数千个cookie。这样可以，还是有更好的方法？

这是我的jQuery：

function completeItem(){
if( jQuery(this).parent().css('textDecoration') == 'line-through' ){
    jQuery(this).parent().css('textDecoration', 'none').removeClass('due-linethrough');
}else{
    jQuery(this).parent().css('textDecoration', 'line-through').addClass('due-linethrough');
}
}

jQuery(function() {

jQuery(document).on('click', '.complete', completeItem); 

});

这是html

<ul id="noticeboard-list">
<li><label class="checkbox"><input type="checkbox" class="complete">Do task 1</label></li>
<li><label class="checkbox"><input type="checkbox" class="complete">Do task 2</label></li>
<li><label class="checkbox"><input type="checkbox" class="complete">Do task 3</label></li>
</ul>

非常感谢你的帮助！

凯蒂

编辑以下建议使用kri5t

中的jstorage

而不是cookie我试图使用jstorage。以下显示了我的新代码：

jquery的

function completeItem(){

        taskID=jQuery(this).attr('id');

        if( jQuery(this).parent().css('textDecoration') == 'line-through' ){
                jQuery(this).parent().css('textDecoration', 'none').removeClass('due-linethrough');
                jQuery.jStorage.set(taskID, 'done');
        }else{
            jQuery(this).parent().css('textDecoration', 'line-through').addClass('due-linethrough');
            jQuery.jStorage.deleteKey(taskID);

        }
    }

HTML

<ul id="noticeboard-list">
<li><label class="checkbox"><input type="checkbox" class="complete" id="HPtask1">Do task 1</label></li>
<li><label class="checkbox"><input type="checkbox" class="complete" id="HPtask2">Do task 2</label></li>
<li><label class="checkbox"><input type="checkbox" class="complete" id="HPtask3">Do task 3</label></li>
</ul>

当用户勾选复选框时，taskID将设置为“done”。取消它时，它将被删除。但是，如何使用此信息将所有复选框的文本修饰设置为直通，其中jstorage中的键（例如HPtask1）与匹配ID（例如HPtask1）相对应，其中键的值为“done”？（希望这很有意义！）。

再次感谢：D

Answer 1

此框架非常适合在本地存储数据： http://www.jstorage.info/

您可以为每个任务添加带键/值的元素，例如

key = ID of element

value = if it has been done or not

然后，每次加载应用程序时，都要检查数据是否存在。如果本地存储了一些数据，则检查完成的所有任务。

编辑回答编辑：

执行此操作时，您需要考虑几件事情。首先，如果您想添加动态问题，我认为最好的方法是将您的单选按钮转换为JSON对象。这样，您可以将JSON对象保存在本地存储中，当用户重新访问页面时，您可以动态加载所有复选框。您应该研究如何将复选框转换为json对象以及如何重新加载它。这是一个非常简单的技术。

例如，您可以存储复选框的文本以及是否在json对象中选中了它。当您重新加载整个页面时，您将浏览存储的每个元素，并重新创建带有文本和布尔值的新复选框。

您可以使用index（）方法加载本地存储中的所有内容。它为您提供存储在本地存储中的所有密钥。然后，您可以遍历所有这些键并加载已保存的布尔值，然后采取相应的行动。

我希望这是有道理的，否则让我知道。

Answer 2

非常感谢Kristian - 我已经设法用jStorage实现了我想要的东西。我已经在下面发布了我的代码以获取兴趣。它似乎工作 - 感谢您使用jStorage的建议 - 我已经学到了新东西！唯一不错的就是在90天后使个别任务失效，就像一个cookie，但我只能看到如何以分钟为单位过期。

任务一旦到期，任何时候都可能只显示4或5个任务。但是，jStorage数据中可能存有数千个过期任务。这会减慢速度或对用户产生负面影响吗？如果是这样，有没有人对如何提高效率/过期旧数据有任何建议？

再次感谢，

凯蒂

<强>的jQuery

function completeItem(){

var taskID=jQuery(this).attr('id');

/*Check whether the task clicked already has a line-through*/
if( jQuery(this).parent().css('textDecoration') == 'line-through' ){

        /*Remove the line through*/
        jQuery(this).parent().css('textDecoration', 'none').removeClass('done');
        jQuery(this).parent().parent().siblings().removeClass('done');

        /*Remove the current task from storage (i.e. forget that it was marked as done)*/
        jQuery.jStorage.deleteKey(taskID)
}else{

    /*Add a line through*/
    jQuery(this).parent().css('textDecoration', 'line-through').addClass('done');
    jQuery(this).parent().parent().siblings().addClass('done');

    /*Add the task to storage (i.e. remember that it has been marked as done)*/
    jQuery.jStorage.set(taskID, 'done');

}
}

jQuery(function() {

/*Create array from task list IDs*/
var taskListIDs = jQuery("ul#noticeboard-list li input").map(function() {return this.id; }).get(); 

//var taskArray = jQuery.jStorage.index();
var n;

/*loop through each item in the array of tasks visible on the page*/
for (n = 0; n < taskListIDs.length; ++n) {

    /*Get the ID of the nth item in the array*/ 
    var uniqueTask = taskListIDs[n];    

    /*Find out whether the current task has been marked as done*/
    var taskStatus = jQuery.jStorage.get(uniqueTask);

    /*Check if the current task in the array has been marked as done*/
    if (taskStatus == 'done'){

        /*Add a line-through and add class to override blue highlighting for an item that's due*/
        jQuery('#'+uniqueTask).parent().css('textDecoration', 'line-through').addClass('done');

        /*Add a tick in the checkbox*/
        jQuery('#'+uniqueTask).prop('checked', true);

        /*Add class to override highlighting*/
jQuery('#'+uniqueTask).parent().parent().siblings().addClass('done');

    }
}


/*every time user clicks on item, check if it has the class .complete. If yes, perform competeItem.*/
jQuery(document).on('click', '.complete', completeItem); 

});

<强> HTML

        <ul id="noticeboard-list">
            <li><div class="task"><label class="checkbox due"><input type="checkbox" class="complete" id="HPtask24">Task 1</label></div><div class="due-date due">Feb<br><span>27</span></div></li>
            <li><div class="task"><label class="checkbox"><input type="checkbox" class="complete" id="HPtask31">Task 2</label></div><div class="due-date">Mar<br><span>19</span></div></li>
            <li><div class="task"><label class="checkbox"><input type="checkbox" class="complete" id="HPtask54">Task 3</label></div><div class="due-date">May<br><span>06</span></div></li>
        </ul>

在jQuery中创建待办事项列表，记住已完成的项目

2 个答案: