相对于实战1,这部分的代码更多,明河将其封装成一个组件了,目前没有写成jquery插件,看日后需要,有可能会将其重构成jquery插件,明河把这个类,叫做Histories。
Histories主要有以下几个功能:
- 显示浏览历史文章列表
- 可以保存文章数据
- 可以清理数据
将json字符串存入本地存储
保存浏览历史,比保存评论信息,有个难得地方,就是数据的处理,一条浏览历史,包含文章id、url、标题,或者图片之类的,明显我们不能使用上一篇教程的方式,一个一个存储,那样成本太高了。
我们需要一个存储字段,能够包含所有的的数据,比如是下面的形式:(默认保存在data-histories字段)
- [{'id' : 1,'title' : '第1篇文章标题','url' : 'http://www.36ria.com/'},
- {'id' : 2,'title' : '第2篇文章标题','url' : 'http://www.36ria.com/'},
- {'id' : 3,'title' : '第3篇文章标题','url' : 'http://www.36ria.com/'},
- {'id' : 4,'title' : '第4篇文章标题','url' : 'http://www.36ria.com/'}
- ]

上图截自明河本地运行demo后的本地存储情况。
保存单条数据
- var data = {'id' : id,'title' : '第'+id+'篇文章标题','url' : 'http://www.36ria.com/'};
- //保存数据
- histories.save(data);
demo中的id是明河用随机数模拟出来的,最后调用Histories类的save方法,将数据追加到存储字段data-histories内。
接下来我们来看Histories的save方法,做了哪些处理。
- /**
- * 将值保存到本地数据
- * @param {Object} singleData 文章数据
- * @return {Boolean}
- */
- save : function(singleData){
- var self = this,config = self.config,ls = config.ls,sData;
- //保存的数据类型必须为对象
- if(typeof singleData == 'object'){
- //如果已经存在该条数据,直接退出
- if(self.isExist(singleData.id)) return false;
- //删除多余数据
- self._removeExceedPost();
- //向数据缓存追加一条数据
- self.data.unshift(singleData);
- //转化成json字符串
- sData = JSON.stringify(self.data);
- //调用本地存储类,保存数据
- ls.item(config.storeName,sData);
- }
- return true;
- }
代码中有几个关键点,明河说明下:
对文章id进行判断,如果已经存在该数据,直接退出save
- //如果已经存在该条数据,直接退出
- if(self.isExist(singleData.id)) return false;
向数据数组前面插入数据
- self.data.unshift(singleData);
self.data为数据数组,unshift是js数组方法,前插数据,跟push的作用相反。
将单条数据转化成json字符串
- //转化成json字符串
- sData = JSON.stringify(self.data);
JSON是jquery内置的对象,用于处理json,这里将json数据转成字符串,最后保存到data-histories。
输出列表
- <ul id="histories">
-
- </ul>
- var histories = new Histories();
- //添加历史数据列表
- histories.appendTo('#histories');
appendTo方法,会把列表数据加入到指定容器内。
接下来来看下appendTo这个方法,做了哪些处理。
- /**
- * 将数据加入dom
- * @param {String} container 容器
- */
- appendTo : function(container){
- var self = this,$container = $(container),html = '',data = self.getData(),config =self.config,maxTitleLen = config.maxTitleLen,tpl = config.tpl,count = config.count;
- if($container.length == 0 || data.length == 0) return false;
- //遍历数据(数组)
- $.each(data,function(i){
- //截取标题
- this.title = this.title.substr(0,maxTitleLen);
- //转换模板
- html += tpl.TFtpl(this);
- //超过最大渲染数,直接退出循环
- if(i >= count) return false;
- });
- return $(html).appendTo($container);
- },
获取json数据
getData方法,会将json字符串转成json对象:
- /**
- * 获取本地数据
- * @return {Array}
- */
- getData : function(){
- var self = this,config = self.config,ls = config.ls,sData =ls.item(config.storeName);
- if(sData) self.data = JSON.parse(sData);
- return self.data;
- }
留意下面的代码:
- self.data = JSON.parse(sData);
parse是JSON很重要的方法,会将json数据字符串,转换成json对象。
列表模板
- //列表的li模板
- tpl : '<li data-id="{id}"><a href="{url}" target="_blank">{title}</a></li>'
我们需要模板是可配置的,appendTo这个方法最主要的工作就是解析模板,然后把html片段添加到容器内。
解析模板
- //遍历数据(数组)
- $.each(data,function(i){
- //截取标题
- this.title = this.title.substr(0,maxTitleLen);
- //转换模板
- html += tpl.TFtpl(this);
- //超过最大渲染数,直接退出循环
- if(i >= count) return false;
- });
TFtpl是明河写的简单的模板解析方法:
- //简单的转换模板函数
- String.prototype.TFtpl = function(o){
- return this.replace(/{([^{}]*)}/g,
- function (a,b){
- var r = o[b];
- return typeof r==='string'?r:a;
- }
- );
- };
明河结语
不知道经过二个demo的实战教程,对大家了解localStorage的用法有没有帮助,这篇教程代码还是比较多了,如果你有什么以后,都可以给明河留言,感谢大家的支持。