13-解决方案

17.3.2　解决方案

本解决方案的HTML部分参见秘诀17.1（完全相同）。下面列出JavaScript：

(function($) {
　　 $('document').ready(function() {
　　　　　if( window.localStorage ) { appStorage = window.localStorage; }
　　　　　else { appStorage = globalStorage[location.hostname]; }
　　　　　var listHtml = appStorage['task-list'];
　　　　　$('#task-list').append(listHtml.value ? listHtml.value : listHtml);

开始的设置比基于jStore的解决方案要更冗长。Firefox有DOM Storage API长期存储部分的一个非标准实现。它使用 globalStorage 数组而不是 localStorage 对象在会话之间存储数据。 globalStorage 数组中的每个存储对象都以提供当前文档的域作为键码。下面的代码在 localStorage 可用时将使用它，否则回退到 globalStorage 。

在代码的下一部分中，用任何已有的任务填充无序列表。在基于jStore的例子中，这只需要一行代码。这里附加的复杂性是因为Firefox的特殊行为。 localStorage 返回一个字符串，但是访问 globalStorage 时返回一个具有两个属性 value 和 secure 的对象。当 value 属性存在时使用它，否则假定 localStorage 返回一个字符串：

　　　　　$('#task-add').click(function() {
　　　　　　　 var task = $('#task-input').val();
　　　　　　　 var taskHtml = '<li><a href="#">done</a> ' + task + '</li>';
　　　　　　　 appStorage['task-list'] = $('#task-list').append(taskHtml).html();
　　　　　　　 return false;
　　　　　});
　　　　　$('#list-clear').click(function() {
　　　　　　　 $('#task-list').empty();
　　　　　　　 appStorage['task-list'] = '';
　　　　　　　 return false;
　　　　　});
　　　　　$('#task-list a').live('click',function() {
　　　　　　　 $(this).parent().remove();
　　　　　　　 appStorage['task-list'] = $('#task-list').html();
　　　　　　　 return false;
　　　　　});
　　 });
})(jQuery);

剩下的代码添加新的任务，在任务标记为“done”时删除任务，和基于jStore的前一个秘诀一样，为DOM元素附加事件，清除任务列表。但是，这里没有使用基于jStore函数的接口操纵存储数据，而是直接为前面创建的 appStorage 对象赋值。这样就简化了删除任务的代码。