0

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

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

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 设置为“完成”。当他们取消勾选它时，它会被删除。但是，我如何使用这些信息为所有在 jstorage（例如 HPtask1）中具有与匹配 ID（例如 HPtask1）对应的键值“完成”的复选框的文本装饰设置为直通？（希望这是有道理的！）。

再次感谢 :D

4

2 回答 2

1

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

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

key = ID of element

value = if it has been done or not

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

编辑回答编辑：

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

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

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

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

于 2014-02-28T10:50:43.950 回答
0

非常感谢 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>
于 2014-03-04T10:11:07.110 回答