增加用户自己喜好的新闻分类

　　当在增加新闻分类页中，点‘Get Category’按钮后，触发buttonGetCategoryVar.click()事件，代码如下：

var buttonGetCategoryVar = $('#buttonGetCategory');
var categoryVar = $('#category');
var EMPTY = '';
...
buttonGetCategoryVar.click(function() ...{
   if(categoryVar.val() != EMPTY)...{
      showProgress();
      return getNews(categoryVar.val(),addNews);
   }else...{
      showCategories();
      return false;
   }
});
...
function addNews(xml)...{
   populateSingleNews(xml);
   storeCurrentNews();
   showCategories();
}

 　　在点‘Get Category’ 按钮后，首先判断下拉列表框中用户是否选择了新闻分类，如果选择了新闻分类则调用getNews方法，getNews()方法我们已经讨论过，实际上就是这里把选择的新闻分类名称通过ajax调用发送到服务端，获得服务端返回的XML内容。

　　在getNews方法的回调方法中，调用的是 populateSingleNews(xml);原因是在增加完新闻分类后，跳转到的页面中，是显示刚新增的一个分类以及其最新的一条新闻，如下图，再调用storeCurrentNews()，把用户增加的这个新闻分类保存到HTML5中的localStorage中。

▲图2 上面这个图中，用户选择了两个新闻分类U.S.News和Economy News。

　　保存用户选择的新闻分类

　　现在我们回过头来看如何使用HTML5的localStorage特性去保存用户选择的新闻分类。

　　代码如下：

var COOKIE_NAME = 'news';
var COMMA = ',';
var EMPTY = '';
var LI = 'li';
var PAR = 'p';
var ID = 'id';
...
var currentNewsVar = $('#currentNews');
...
function storeCurrentNews()...{
   $.DSt.set(COOKIE_NAME, EMPTY);
   var tmp = EMPTY;
   currentNewsVar.find(LI).each(function()...{
      tmp = tmp + COMMA + $(this).find(PAR).attr(ID).substring(4);
   });
   $.DSt.set(COOKIE_NAME, tmp.substring(1));
}

 　　在storeCurrentNews方法中，首先调用DST.js plugin插件清除掉原先保存的cookie。

　　接着， 使用jQuery的find和each方法，去获得图2获得新闻分类列表中的每个分类的名称，这里实际上是获得<p id='cat_business'>中的cat_business部分，然后再用substring方法获得其实际名称，这里即business为其分类名称。

　　最后使用DST.js plugin中的set方法，把用户选择的新闻分类列表都保存在cookie中。