html5本地存储localStorage实战（2）（转）

相对于实战1，这部分的代码更多，明河将其封装成一个组件了，目前没有写成jquery插件，看日后需要，有可能会将其重构成jquery插件，明河把这个类，叫做Histories。

Histories主要有以下几个功能：

• 显示浏览历史文章列表
• 可以保存文章数据
• 可以清理数据

将json字符串存入本地存储

保存浏览历史，比保存评论信息，有个难得地方，就是数据的处理，一条浏览历史，包含文章id、url、标题，或者图片之类的，明显我们不能使用上一篇教程的方式，一个一个存储，那样成本太高了。
我们需要一个存储字段，能够包含所有的的数据，比如是下面的形式：（默认保存在data-histories字段）

1. [{'id' : 1,'title' : '第1篇文章标题','url' : 'http://www.36ria.com/'},
2. {'id' : 2,'title' : '第2篇文章标题','url' : 'http://www.36ria.com/'},
3. {'id' : 3,'title' : '第3篇文章标题','url' : 'http://www.36ria.com/'},
4. {'id' : 4,'title' : '第4篇文章标题','url' : 'http://www.36ria.com/'}
5. ]

上图截自明河本地运行demo后的本地存储情况。

保存单条数据

1. var data = {'id' : id,'title' : '第'+id+'篇文章标题','url' : 'http://www.36ria.com/'};
2. //保存数据
3. histories.save(data);

demo中的id是明河用随机数模拟出来的，最后调用Histories类的save方法，将数据追加到存储字段data-histories内。
接下来我们来看Histories的save方法，做了哪些处理。

1. /**
2.      * 将值保存到本地数据
3.      * @param {Object} singleData 文章数据
4.      * @return {Boolean}
5.      */
6.     save : function(singleData){
7.         var self = this,config = self.config,ls = config.ls,sData;
8.         //保存的数据类型必须为对象
9.         if(typeof singleData == 'object'){
10.             //如果已经存在该条数据，直接退出
11.             if(self.isExist(singleData.id)) return false;
12.             //删除多余数据
13.             self._removeExceedPost();
14.             //向数据缓存追加一条数据
15.             self.data.unshift(singleData);
16.             //转化成json字符串
17.             sData = JSON.stringify(self.data);
18.             //调用本地存储类，保存数据
19.             ls.item(config.storeName,sData);
20.         }
21.         return true;
22.     }

代码中有几个关键点，明河说明下：

对文章id进行判断，如果已经存在该数据，直接退出save

1. //如果已经存在该条数据，直接退出
2. if(self.isExist(singleData.id)) return false;

向数据数组前面插入数据

1. self.data.unshift(singleData);

self.data为数据数组，unshift是js数组方法，前插数据，跟push的作用相反。

将单条数据转化成json字符串

1. //转化成json字符串
2. sData = JSON.stringify(self.data);

JSON是jquery内置的对象，用于处理json，这里将json数据转成字符串，最后保存到data-histories。

输出列表

1. <ul id="histories">
2.  
3.         </ul>

1. var histories = new Histories();
2. //添加历史数据列表
3. histories.appendTo('#histories');

appendTo方法，会把列表数据加入到指定容器内。
接下来来看下appendTo这个方法，做了哪些处理。

1. /**
2.      * 将数据加入dom
3.      * @param {String} container 容器
4.      */
5.     appendTo : function(container){
6.         var self = this,$container = $(container),html = '',data = self.getData(),config =self.config,maxTitleLen = config.maxTitleLen,tpl = config.tpl,count = config.count;
7.         if($container.length == 0 || data.length == 0) return false;
8.         //遍历数据（数组）
9.         $.each(data,function(i){
10.             //截取标题
11.             this.title = this.title.substr(0,maxTitleLen);
12.             //转换模板
13.             html += tpl.TFtpl(this);
14.             //超过最大渲染数，直接退出循环
15.             if(i >= count) return false;
16.         });
17.         return $(html).appendTo($container);
18.     },

获取json数据

1. data = self.getData();

getData方法，会将json字符串转成json对象：

1. /**
2.      * 获取本地数据
3.      * @return {Array}
4.      */
5.     getData : function(){
6.         var self = this,config = self.config,ls = config.ls,sData =ls.item(config.storeName);
7.         if(sData) self.data = JSON.parse(sData);
8.         return self.data;
9.     }

留意下面的代码：

1. self.data = JSON.parse(sData);

parse是JSON很重要的方法，会将json数据字符串，转换成json对象。

列表模板

1. //列表的li模板  
2.     tpl : '<li data-id="{id}"><a href="{url}" target="_blank">{title}</a></li>'

我们需要模板是可配置的，appendTo这个方法最主要的工作就是解析模板，然后把html片段添加到容器内。

解析模板

1. //遍历数据（数组）
2.         $.each(data,function(i){
3.             //截取标题
4.             this.title = this.title.substr(0,maxTitleLen);
5.             //转换模板
6.             html += tpl.TFtpl(this);
7.             //超过最大渲染数，直接退出循环
8.             if(i >= count) return false;
9.         });

TFtpl是明河写的简单的模板解析方法：

1. //简单的转换模板函数
2. String.prototype.TFtpl = function(o){
3.     return this.replace(/{([^{}]*)}/g,
4.             function (a,b){
5.                 var r = o[b];
6.                 return typeof r==='string'?r:a;
7.             }
8.     );
9. };

明河结语

不知道经过二个demo的实战教程，对大家了解localStorage的用法有没有帮助，这篇教程代码还是比较多了，如果你有什么以后，都可以给明河留言，感谢大家的支持。