ionic 通过PouchDB ＋ SQLite来实现app的本地存储

您可自由转发此文， 但请保留出处：Ionic在线学习网站 http://www.ioniconline.com

PouchDB：是操作SQLite数据库的javascript库 （跟mongoose操作mongoldb一样）

一：创建工程

ionic start myappsqlite

二：安装SQLite插件和pouchdb.js库，并将pouchdb引入到index.html中

安装SQLite插件

cordova plugin add io.litehelpers.cordova.sqlitestorage

安装pouchdb库

sudo bower --allow-root install pouchdb

在index.html引入pouchdb

[code]<script src="lib/pouchdb/dist/pouchdb.min.js"></script>

三：首先配置service或者factory

[code].factory('AttentionService', ["$q",function ($q) {
    var _db;
    var _attentions;

    function initDB() {
        // Creates the database or opens if it already exists
        _db = new PouchDB('attentions', {adapter: 'websql'});
    }

    function addAttention(attention) {
        return $q.when(_db.post(attention));
    }

    function updateAttention(attention) {
        return $q.when(_db.put(attention));
    }

    function deleteAttention(attention) {
        return $q.when(_db.remove(attention));
    }

    function getAllAttentions() {
        if (!_attentions) {
            return $q.when(_db.allDocs({ include_docs: true}))
                .then(function(docs) {
            // Each row has a .doc object and we just want to send an
            // array of birthday objects back to the calling controller,
            // so let's map the array to contain just the .doc objects.
                      _attentions = docs.rows.map(function(row) {
                            // Dates are not automatically converted from a string.
                            row.doc.Date = new Date(row.doc.Date);
                            return row.doc;
                      });

                      // Listen for changes on the database.
                      _db.changes({ live: true, since: 'now', include_docs: true})
                            .on('change', onDatabaseChange);

                      return _attentions;
                });
        } else {
                              // Return cached data as a promise
            return $q.when(_attentions);
        }
    }

    return {
        initDB: initDB,

        // We'll add these later.
        getAllAttentions: getAllAttentions,
        addAttention: addAttention,
        updateAttention: updateAttention,
        deleteAttention: deleteAttention,
        onDatabaseChange: onDatabaseChange,
        findIndex:findIndex
    };

    function onDatabaseChange(change) {
        var index = findIndex(_attentions, change.id);
        var attention = _attentions[index];

        if (change.deleted) {
            if (attention) {
                _attentions.splice(index, 1); // delete
            }
        } else {
            if (attention && attention._id === change.id) {
                _attentions[index] = change.doc; // update
            } else {
                _attentions.splice(index, 0, change.doc) // insert
            }
        }
    }

    function findIndex(array, id) {
        var low = 0, high = array.length, mid;
        while (low < high) {
            mid = (low + high) >>> 1;
            array[mid]._id < id ? low = mid + 1 : high = mid
        }
        return low;
    }

}])

四：项目启动时需要初始化数据库，可以在.run()方法中初始化

.run(function($ionicPlatform,Push,AttentionService){ $ionicPlatform.ready(function() { //初始化数据库

[code]        AttentionService.initDB();
｝

｝）

五：编写controller和views中的代码

具体在medDetailCtrl中添加数据到数据库，添加界面在addAttention.html。 在attentionCtrl中获取数据，展示在attention.html。 具体代码

medDetailCtrl中代码：

[code].controller('medDetailCtrl', function ($scope, $ionicModal, AttentionService)｛

    $ionicModal.fromTemplateUrl('templates/addAttention.html', {
        scope: $scope
    }).then(function(modal) {
        $scope.modal = modal;
    });

    $scope.attention = {};

    $scope.closeaddAttention = function() {
        $scope.modal.hide();

    }

                              // Open the login modal
    $scope.showaddAttention = function() {
        $scope.modal.show();
    }

    $scope.tureaddAttention = function() {
        if(!$scope.attention.time || !$scope.attention.detail){
             console.log("时间和备注不能为空 -> " + $scope.attention.time + $scope.attention.detail);
              window.alert("时间和备注不能为空！");
            return;
        }
                              AttentionService.initDB();
        AttentionService.addAttention($scope.attention);
        window.alert("添加提示成功");
    $scope.attention.time = "";
        $scope.attention.detail = "";
        $scope.closeaddAttention();
    }
})

addAttention.html中代码：

[code]<ion-modal-view>
    <ion-header-bar class="bar bar-header bar-positive">
        <h1 class="title">添加提醒</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="closeaddAttention()">返回</button>
        </div>
    </ion-header-bar>
    <ion-content>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" placeholder="8:00" ng-model="attention.time">
                    </label>
            <label class="item item-input">
                <input type="text" placeholder="一天2次，药量减半哦！" ng-model="attention.detail">
                    </label>
        </div>
        <div class="padding">
            <button ng-submit="tureaddAttention()" class="button button-block button-positive activated">添加</button>
        </div>
    </ion-content>
</ion-modal-view>

attentionCtrl中的代码：

[code].controller('attentionCtrl', function ($scope, $ionicModal, $ionicPlatform, AttentionService) {
    AttentionService.initDB();
        // Get all birthday records from the database.
        AttentionService.getAllAttentions().then(function(attentions) {
              $scope.attentions = attentions;

        });
    var remove=function(attention) {
            $scope.attentions.remove(attention);
            AttentionService.deleteAttention(attention);

        };
｝）

attention.html中的代码：

[code]<ion-view title="数据列表">
    <ion-content padding="true" class="has-header">
        <ion-list>
        <ion-item class="item-remove-animate item-avatar item-icon-right" type="item-text-wrap" ng-repeat="attention in attentions">
            <h2>{{attention.time}}</h2>
            <p>{{attention.detail}}</p>
            <ion-option-button class="button-assertive" ng-click="remove(attention)">
                Delete
            </ion-option-button>
        </ion-item>
        </ion-list>
    </ion-content>

</ion-view>

以上是添加和获取数据，其他功能可以自己尝试。

您可自由转发此文， 但请保留出处：http://www.ioniconline.com/ionic-pouchdb-sqlite-storage/