html5本地存储localStorage实战(2)(转)

本文介绍了 Histories 组件的功能,包括显示浏览历史文章列表、保存文章数据、清理数据及如何将 JSON 字符串存入本地存储。通过封装单条数据的保存方法,实现了一种高效的数据处理方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

相对于实战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的用法有没有帮助,这篇教程代码还是比较多了,如果你有什么以后,都可以给明河留言,感谢大家的支持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值