ionic怎样使用LokiJS作为本地存储
来源:互联网 发布:杯装茶 知乎 编辑:程序博客网 时间:2024/05/22 01:41
ionic怎样使用LokiJS作为本地存储
欢迎大家到我的博客查看ionic App使用LokiJS作为本地存储,并关注我学习Ionic 1和Ionic 2的历程,共同学习,共同进步。
本文是翻译而来,留存以后观看,难免有错误之处,大家也可查看原文。
源码可以在Github上找到。
LokiJS是JS库,并使用内存数据库,所以拥有更快的性能,更加适合于hybrid app。其API和MongoDB很是相似。并且可以通过IndexedDB存储数据库,也可以通过使用JSON文件作为存储,甚至可以自己定义存储模式。
LokiJS被创造出来的原因之一是为了提供一个可以替代SQLite在cordova app中的作用。
LokiJS的缺点很明显,它不具有很强大的数据同步能力,但是其Changes API能够记录对本地数据库的所有更改,可以使用Changes API同步数据库。所以如果我们的app只需要在本地存储数据,使用LokiJS是再合适不过了,因为其对数据库的所有操作都在内存中完成,所以速度更快。
安装
在我们的ionic工程中,我们可以使用bower安装LokiJS:
$ bower install lokijs --save
安装完成后,下一步当然是在我们的index.html中引入LokiJS,因为LokiJS也支持angular,所以我们也将其对应于angular的JS文件引入:
<script src="lib/lokijs/src/lokijs.js"></script> <script src="lib/lokijs/src/loki-angular.js"></script>
LokiJS默认存储数据到localStorage,但是localStorage并不可靠,因为当手机内存不足时,localStorage可能会被清除。
所以我们需要寻找其他解决途径,另一个选择是使用IndexedDB,但不幸的是IOS并不支持,那是因为Cordova使用的UIWebView不支持IndexedDB。
所以我们想到可以使用JSON文件作为存储,但眼下LokiJS在Cordova apps中没有保存文件的adapter,不过我们可以使用非官方的adapter:loki-cordova-fs-adapter达到我们的目的。loki-cordova-fs-adapter是Corentin Smith在ES6的基础上完成的,但是也可以下载向下兼容的版本。下载完成后,当然还是需要在index.html中引入:
<script src="js/loki-cordova-fs-adapter.js"></script>
这个adapter依赖于Cordova File Plugin,所以我们还需要安装此插件:
$ cordova plugin add cordova-plugin-file
注:也可以按照自己的想法创建adapter存储数据。
现在我们已经安装完成必须的库,下一步是将lokijs模块添加到我们app模块的依赖列表中:
angular.module('starter', ['ionic', 'lokijs'])
我们要创建的app
我们现在创建的app是一个生日保存app,可以添加、删除、更新、读取存储的生日信息:
构造Service
我们现在要构造一个service封装我们的LokiJS调用。
angular.module('starter').factory('BirthdayService', ['$q', 'Loki', BirthdayService]);function BirthdayService($q, Loki) { var _db; var _birthdays; function initDB() { var adapter = new LokiCordovaFSAdapter({"prefix": "loki"}); _db = new Loki('birthdaysDB', { autosave: true, autosaveInterval: 1000, // 1 second adapter: adapter }); }; return { initDB: initDB, getAllBirthdays: getAllBirthdays, addBirthday: addBirthday, updateBirthday: updateBirthday, deleteBirthday: deleteBirthday };}
初始化LokiJS数据库有多种方法,本例中我们配置LokiJS数据库每秒自动保存数据到JSON文件中(autosave:true)。当然自动保存的功能足够智能,它知道仅仅当内存数据库改变时存储数据。
获取所有生日信息
很显然,上面定义了5个函数,我们只实现了一个,现在我们完成getAllBirthdays函数:
function getAllBirthdays() { return $q(function (resolve, reject) { var options = {}; _db.loadDatabase(options, function () { _birthdays = _db.getCollection('birthdays'); if (!_birthdays) { _birthdays = _db.addCollection('birthdays'); } resolve(_birthdays.data); }); });};
在getAllBirthdays函数中,我们必须首先使用loadDatabase函数加载数据库。当加载完成后,我们可以在loadDatabase函数的回调函数中获得数据集。
如上所示,options对象是loadDatabase函数的第一个参数,如果你不想对从JSON文件中获取的数据做任何处理的话,你可以将其置空。然而,由于我们需要保存的生日信息不能被转自动换为Date对象,所以我们需要自定义infalte函数进行处理:
var options = { birthdays: { proto: Object, inflate: function (src, dst) { var prop; for (prop in src) { if (prop === 'Date') { dst.Date = new Date(src.Date); } else { dst[prop] = src[prop]; } } } }};
我们只是将source对象的所有内容拷贝到destination对象,除了对Date属性作出处理,将其变更为Date对象。
增加、更新、删除生日信息
现在我们还需要完成“增加”、“更新”、“删除”生日信息的功能:
function addBirthday(birthday) { _birthdays.insert(birthday);};function updateBirthday(birthday) { _birthdays.update(birthday);};function deleteBirthday(birthday) { _birthdays.remove(birthday);};
创建UI
我们前面已经有了service给我们处理大部分工作,现在我们来创建UI。
首先我们先创建一个controller:OverviewController, 在OverviewController中调用birthdayService.initDB函数初始化数据库,为保证初始化顺利进行,我们需要等待$ionicPlatform.ready事件:
angular.module('starter').controller('OverviewController', ['$scope', '$ionicModal', '$ionicPlatform', 'BirthdayService', OverviewController]);function OverviewController($scope, $ionicModal, $ionicPlatform, birthdayService) { var vm = this; $ionicPlatform.ready(function() { // Initialize the database. birthdayService.initDB(); // Get all birthday records from the database. birthdayService.getAllBirthdays() .then(function (birthdays) { vm.birthdays = birthdays; }); }); // Initialize the modal view. $ionicModal.fromTemplateUrl('add-or-edit-birthday.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); vm.showAddBirthdayModal = function() { $scope.birthday = {}; $scope.action = 'Add'; $scope.isAdd = true; $scope.modal.show(); }; vm.showEditBirthdayModal = function(birthday) { $scope.birthday = birthday; $scope.action = 'Edit'; $scope.isAdd = false; $scope.modal.show(); }; $scope.saveBirthday = function() { if ($scope.isAdd) { birthdayService.addBirthday($scope.birthday); } else { birthdayService.updateBirthday($scope.birthday); } $scope.modal.hide(); }; $scope.deleteBirthday = function() { birthdayService.deleteBirthday($scope.birthday); $scope.modal.hide(); }; $scope.$on('$destroy', function() { $scope.modal.remove(); }); return vm;}
最后,我们处理index.html,进行界面设计,这里我们使用$ionicModal来展示“增加生日”和“编辑生日”的界面:
<body ng-app="starter"> <ion-pane ng-controller="OverviewController as vm"> <ion-header-bar class="bar-stable"> <h1 class="title">Birthdays</h1> <div class="buttons"> <button ng-click="vm.showAddBirthdayModal()" class="button button-icon icon ion-plus"></button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item ng-repeat="b in vm.birthdays" ng-click="vm.showEditBirthdayModal(b)"> <div style="float: left">{{ b.Name }}</div> <div style="float: right">{{ b.Date | date:"dd MMMM yyyy" }}</div> </ion-item> </ion-list> </ion-content> </ion-pane> <script id="add-or-edit-birthday.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1 class="title">{{ action }} Birthday</h1> <div class="buttons"> <button ng-hide="isAdd" ng-click="deleteBirthday()" class="button button-icon icon ion-trash-a"></button> </div> </ion-header-bar> <ion-content> <div class="list list-inset"> <label class="item item-input"> <input type="text" placeholder="Name" ng-model="birthday.Name"> </label> <label class="item item-input"> <input type="date" placeholder="Birthday" ng-model="birthday.Date"> </label> </div> <div class="padding"> <button ng-click="saveBirthday()" class="button button-block button-positive activated">Save</button> </div> </ion-content> </ion-modal-view> </script> </body>
结语
可以看出,使用LokiJS作为本地存储简单易用,唯一麻烦的地方是为ionic app选择合适的adapter。使用JSON文件的方式存储效果还是不错的,我已经在Android和IOS测试完成。
推荐一款个人使用了半年的理财产品:创建了6年的挖财,新人收益36%,7天18%,1年10%,注册送308元券
- ionic怎样使用LokiJS作为本地存储
- ionic app中如何使用PouchDB+SQLite作为本地存储
- WEB APP 数据存储-LokiJS
- ionic---数据本地存储sqlite
- ionic 中使用pouchdb + sqlite 来实现app的本地存储
- 【ionic App问题总结系列】ionic登录拦截机制-使用Modal作为登录框
- CentOS使用光盘作为本地源
- android app 使用OPENCV 作为本地库
- ubuntu 使用本地软件包作为安装源
- CentOS使用光盘作为本地源
- Linux7使用光盘作为本地repo源
- 使用phonegap进行本地存储
- JAVA使用XML作为持久存储介质
- vdr使用linux nfs作为存储
- sae中使用mysql作为session存储
- sae中使用mysql作为session存储
- 使用Swift作为Glance后端存储
- 使用Ceph作为OpenStack的后端存储
- 使用struts2的 下载
- ios打包ipa的四种实用方法(.app转.ipa)
- swift 快速奔跑的兔几 本节的内容是:应用程序沙盒
- 模板方法模式----设计模式系列
- uva532Dungeon Master
- ionic怎样使用LokiJS作为本地存储
- 动态链接库(DLL)总结---静态链接库的创建与使用(4)
- ubuntu13.10系统 安装中文输入法fcitx
- RSA加密算法在iOS9下的问题解决方案
- DL:RBM学习算法——Gibbs采样、变分方法、对比散度、模拟退火
- 挑战高薪的程序员建议看的文章
- delegate block 通知
- android UI学习 -- 设置界面的布局(包括style的使用,selector的使用,Checkbox自定义样式,菜单项的样式)
- 微信测试号的URL和Token原理