UDN-企业互联网技术人气社区

板块导航

浏览  : 821
回复  : 7

[原生js] js 使用 Lawnchair 存储 json 对象到本地

[复制链接]
芭芭拉的头像 楼主
发表于 2017-2-8 15:04:15 | 显示全部楼层 |阅读模式
  项目中用到储存点击记录的功能。

  Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好。

  现在做HTML5移动应用除了LocalStorage的兼容性比较好之外,SQL web database以及IndexedDB都处在僵局中,虽然有人叫嚣着“我们应该干掉 LocalStorage API”,但那是后话,现在也没得选择。

  Lawnchair有个曾经的官网: http://westcoastlogic.com/lawnchair/,不过这个站点提供的源码版本过时了,而且还有错误。

  需要下载的话,最新版本在 https://github.com/brianleroux/lawnchair

  其API汇总
  1. keys (callback) //返回存储对象的所有keys

  2. save (obj, callback)//保存一个对象

  3. batch(array, callback)//保存一组对象

  4. get (key|array, callback)//获取一个或者一组对象,然后调用callback处理

  5. exists (key, callback)//检查是否存在key,并将结果的布尔值(true/false)传递给callback函数

  6. each(callback)//遍历集合,将(对象,对象索引)传递给callback函数

  7. all (callback)//将所有对象放在一个数组返回

  8. remove (key|array, callback)//移除一个或者一组元素。

  9. nuke (callback)//销毁所有
复制代码

  初始化方法 参数中必须有一个函数作为回调函数,哪怕是空。
  1. var store = new Lawnchair({name:'test'}, function() {});
复制代码

  或者
  1. var store = new Lawnchair(function() {});
  2. option默认为空对象,有三个可选属性
  3. option = {
  4.     name://相当于表名
  5.     record://
  6.     adapter://存储类型
  7. }
  8. save (obj, callback)//保存一个对象
复制代码

  保存形式为对象,如果传入的对象有key属性,那么key会作为索引值保存,如果没有key属性,则自动生成一个key值,然后保存在table. index 中
  1. var store = Lawnchair({name:'tableName'}, function(store) {
  2.     });
  3. store.save({
  4.         key:'hust',
  5.         name:'xesam_1'
  6.     })
  7. store.save({
  8.         key:'whu',
  9.         name:'xesam_2'
  10.     })
  11. batch(array, callback)//保存一组对象 效果同上
  12. var store = Lawnchair({name:'table'}, function(store) {
  13.     });
  14. store.batch([{
  15.         key:'hust',
  16.         name:'xesam_1'
  17.     },{
  18.             key:'whu',
  19.             name:'xesam_2'
  20.         }])
  21. exists (key, callback)//检查是否存在key,并将结果的布尔值(true/false)传递给callback函数
  22. store.exists('whu',function(result){
  23.         console.log(result);//true
  24. })
  25. store.exists('test',function(result){
  26.         console.log(result);//false
  27. })
  28. get (key|array, callback)//获取一个或者一组对象,然后调用callback处理
  29. store.get('hust',function(result){
  30.         console.log(result);//{key:'hust',name:'xesam_1'}
  31.     })
  32. all (callback)//将所有对象放在一个数组返回
  33. store.all(function(result){
  34.         console.log(result);//[{key:'hust',name:'xesam_1'},{key:'whu',name:'xesam_2'}]
  35.     })
  36. each(callback)//遍历集合,将(对象,对象索引)传递给callback函数
  37. store.each(function(result){
  38.         console.log(result);
  39.         //{key:'hust',name:'xesam_1'}
  40.         // {key:'whu',name:'xesam_2'}
  41.     })
  42. remove (key|array, callback)//移除一个或者一组元素。
  43. store.remove('whu',function(){
  44.         store.all(function(result){
  45.             console.log(result)//[{key:'hust',name:'xesam_1'}]
  46.         });
  47.     })
  48. nuke (callback)//销毁所有
  49. store.nuke(function(){
  50.         store.all(function(result){
  51.             console.log(result)//[]
  52.         });
  53.     })
  54. keys (callback) //返回存储对象的所有keys
  55. store.keys(function(result){
  56.         console.log(result)//['hust','whu']
  57.     })
复制代码

  笔者项目为例

  新建一个浏览记录的管理者的js文件 代码实现
  1. var haveReadResumeTableName = 'haveReadResumeTableName'

  2. function getHaveReadResumeTableManager() {
  3.     return new Lawnchair({name: haveReadResumeTableName}, function(store) {});
  4. }

  5. //清除30天前的查看记录
  6. function cleanBeforeThirtyDaysResumes() {
  7.     var claerReadResumeHistoryDay = localStorage.claerReadResumeHistoryDay;
  8.     if(claerReadResumeHistoryDay){
  9.         try{
  10.             if(getCurrentDate() == claerReadResumeHistoryDay){
  11.                 return;
  12.             }
  13.         }catch(e){
  14.             //TODO handle the exception
  15.         }
  16.     }
  17.     localStorage.claerReadResumeHistoryDay = getCurrentDate();
  18.     var manager = getHaveReadResumeTableManager();

  19.     var beforeThirtyDays = getAfterDay(-30);
  20.     manager.each(function(resume,keyo) {
  21.         if(resume.SAVETIME < beforeThirtyDays) {
  22.             manager.remove(resume.RESUMEID, function() {});
  23.         }
  24.     });
  25. }
复制代码

  查看简历的时候储存简历信息,SAVETIME 对应的是储存的日期。该记录只会保留30天。
  1. //保存简历到本地
  2.         function saveThisResumeToLoactionWithResumeAndTime(resumeId, nowTime) {
  3.             var store = getHaveReadResumeTableManager();
  4.             // 需要保存的对象
  5.             var resume = {
  6.                 key: resumeId,
  7.                 RESUMEID: resumeId,
  8.                 SAVETIME: nowTime
  9.             };
  10.             // 保存
  11.             store.save(resume);
  12.         }
复制代码

  批量搜索简历 得到数据后判断简历是否在查看记录里面,已查看会做相应的标示。
  1. var resumeManager = getHaveReadResumeTableManager();
  2.                 for(var i = 0, len = list.length; i < len; i++) {
  3.                     var resume = list[i];
  4.                     var li = document.createElement('li');
  5.                     //判断是否查看过此简历
  6.                     var haveReadret = false;
  7.                     resumeManager.exists(resume.RESUMEID, function(haveRead) {
  8.                         haveReadret = haveRead;
  9.                     });
复制代码

  清除30的记录 适当时候调用。

相关帖子

发表于 2017-2-8 15:04:47 | 显示全部楼层
回帖支持下楼主,请眼熟我,我叫“恋恋1983“
使用道具 举报

回复

发表于 2017-2-8 15:04:48 | 显示全部楼层
前排支持下
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部