ionic怎样使用LokiJS作为本地存储

本文是翻译而来，留存以后观看，难免有错误之处，大家也可查看原文。

源码可以在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文件引入：

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中引入：

这个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) {undefined

var _db;

var _birthdays;

function initDB() {undefined

var adapter = new LokiCordovaFSAdapter({"prefix": "loki"});

_db = new Loki('birthdaysDB',

{undefined

autosave: true,

autosaveInterval: 1000, // 1 second

adapter: adapter

});

};

return {undefined

initDB: initDB,

getAllBirthdays: getAllBirthdays,

addBirthday: addBirthday,

updateBirthday: updateBirthday,

deleteBirthday: deleteBirthday

};

}

初始化LokiJS数据库有多种方法，本例中我们配置LokiJS数据库每秒自动保存数据到JSON文件中(autosave:true)。当然自动保存的功能足够智能，它知道仅仅当内存数据库改变时存储数据。

获取所有生日信息

很显然，上面定义了5个函数，我们只实现了一个，现在我们完成getAllBirthdays函数：

function getAllBirthdays() {undefined

return $q(function (resolve, reject) {undefined

var options = {};

_db.loadDatabase(options, function () {undefined

_birthdays = _db.getCollection('birthdays');

if (!_birthdays) {undefined

_birthdays = _db.addCollection('birthdays');

}

resolve(_birthdays.data);

});

});

};

在getAllBirthdays函数中，我们必须首先使用loadDatabase函数加载数据库。当加载完成后，我们可以在loadDatabase函数的回调函数中获得数据集。

如上所示，options对象是loadDatabase函数的个参数，如果你不想对从JSON文件中获取的数据做任何处理的话，你可以将其置空。然而，由于我们需要保存的生日信息不能被转自动换为Date对象，所以我们需要自定义infalte函数进行处理：

var options = {undefined

birthdays: {undefined

proto: Object,

inflate: function (src, dst) {undefined

var prop;

for (prop in src) {undefined

if (prop === 'Date') {undefined

dst.Date = new Date(src.Date);

} else {undefined

dst[prop] = src[prop];

}

}

}

}

};

我们只是将source对象的所有内容拷贝到destination对象，除了对Date属性作出处理，将其变更为Date对象。

增加、更新、删除生日信息

现在我们还需要完成“增加”、“更新”、“删除”生日信息的功能：

function addBirthday(birthday) {undefined

_birthdays.insert(birthday);

};

function updateBirthday(birthday) {undefined

_birthdays.update(birthday);

};

function deleteBirthday(birthday) {undefined

_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) {undefined

var vm = this;

$ionicPlatform.ready(function() {undefined

// Initialize the database.

birthdayService.initDB();

// Get all birthday records from the database.

birthdayService.getAllBirthdays()

.then(function (birthdays) {undefined

vm.birthdays = birthdays;

});

});

// Initialize the modal view.

$ionicModal.fromTemplateUrl('add-or-edit-birthday.html', {undefined

scope: $scope,

animation: 'slide-in-up'

}).then(function(modal) {undefined

$scope.modal = modal;

});

vm.showAddBirthdayModal = function() {undefined

$scope.birthday = {};

$scope.action = 'Add';

$scope.isAdd = true;

$scope.modal.show();

};

vm.showEditBirthdayModal = function(birthday) {undefined

$scope.birthday = birthday;

$scope.action = 'Edit';

$scope.isAdd = false;

$scope.modal.show();

};

$scope.saveBirthday = function() {undefined

if ($scope.isAdd) {undefined

birthdayService.addBirthday($scope.birthday);

} else {undefined

birthdayService.updateBirthday($scope.birthday);

}

$scope.modal.hide();

};

$scope.deleteBirthday = function() {undefined

birthdayService.deleteBirthday($scope.birthday);

$scope.modal.hide();

};

$scope.$on('$destroy', function() {undefined

$scope.modal.remove();

});

return vm;

}

后，我们处理index.html，进行界面设计，这里我们使用$ionicModal来展示“增加生日”和“编辑生日”的界面：

Birthdays
{{ b.Name }}
{{ b.Date | date:"dd MMMM yyyy" }}
Save
结语

可以看出，使用LokiJS作为本地存储简单易用，麻烦的地方是为ionic app选择合适的adapter。使用JSON文件的方式存储效果还是不错的，我已经在Android和IOS测试完成。
————————————————
版权声明：本文为CSDN博主「平安是福13031664853」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42410317/article/details/113402402