ionic 通过PouchDB ＋ SQLite来实现app的本地存储（Local Storage）

╰半夏微凉° 2022-05-22 03:40 106阅读 0赞

参考地址：http://gonehybrid.com/how-to-use-pouchdb-sqlite-for-local-storage-in-your-ionic-app/

1. ionic是跨平台app开发的工具（Cordova）的一个框架！

2.PouchDB是操作SQLite数据库的javascript库（跟mongoose操作mongodb一样）！

3.SQLite是一种轻量级的嵌入式数据库（数据库不需要你安装的，手机系统自带，你需要安装的就是SQLite插件）！

第一步 ：安装Cordova 和 ionic  命令如下：

npm install -g cordova ionic

第二步：创建工程  命令如下：

ionic start birthday

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

//安装SQLite插件
    cordova plugin add io.litehelpers.cordova.sqlitestorage
    
    //安装pouchdb库
    bower install pouchdb
    
    //在index.html引入pouchdb
    <script src="lib/pouchdb/dist/pouchdb.min.js"></script>

第四步：环境基本OK了！接下来开始写代码了！

首先配置service你也可以用factory，我用的service。在www/js/services.js 末尾去掉分号，添加一下代码。

.service('birthday', function () {
        var _db;
        //dateFix 函数是用来处理SQLite读出的数据的，因为SQLite的存储的数据结构层次优点不同，
        //感兴趣的同学可以把数据打印出来研究下
        function dateFix (result) {
            var data = [];<br>　　result.forEach(function (each) {
          <br>　　　　data.push(each.doc);<br>　　});
            return data
        };
    
        return {
            initDB: function () {
                _db = new PouchDB('birthday', {
          adapter: 'websql'});
            },
            getAllBirthday: function (callback) {
                _db.allDocs({
          include_docs: true}).then(function (result) {
                    callback(dateFix(result.rows));
                })
            },
            addBirthday: function (birthday) {
                _db.post(birthday);
            },
            removeBirthday: function (birthday) {
                _db.remove(birthday);
            }
        }
    });

第五步：项目启动时我们要初始化数据库，所以我们在.run()方法里初始化数据库；

第一处时注入我们之前定义的service('birthday')。现在注入进去。

第二处表示$ionicPlatform准备好之后初始化数据库

.run(function($ionicPlatform, birthday) {
        $ionicPlatform.ready(function() {
            birthday.initDB();
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
                cordova.plugins.Keyboard.disableScroll(true);
    
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleLightContent();
            }
        }

第六步：开始controller里和views里的代码了

工程中的路由都已经配置好了，我们直接修改她的controller和views就行了！

展示生日我们用tab-dash.html， 对应的controller是DashCtrl；

tab-dash.html中的代码修改如下：

<ion-view view-title="Dashboard">
        <ion-content class="padding">
            <div class="list card" ng-repeat="birthday in birthdays">
                <div class="item item-divider">{
           {
           birthday.date}}</div>
                <div class="item item-body">
                    <div>
                        {
           {
           birthday.name}}
                    </div>
                </div>
            </div>
        </ion-content>
    </ion-view>

DashCtrl中修改如下：

.controller('DashCtrl', function($scope, birthday) {
        $scope.birthdays = [];
        $scope.init = function () {
            birthday.getAllBirthday(function (data) {
                console.log(data);    //还没保存数据目前打印的是空数组
                $scope.birthdays = data;
            })
        };
        $scope.init();
    })

第七步：开始保存数据页面的controller和views编写了！

存储数据的页面就用tab-account.html, controller就用AccountCtrl。

tab-account.html的页面代码改成这样

<ion-view view-title="Account">
        <ion-content>
            <ion-list>
                <div class="row">
                    <div class="col col-100" style="height:100px;"></div>
                </div>
                <div class="row">
                    <div class="col col-10">{
           {name}}</div>
                    <div class="col col-80"></div>
                    <div class="col col-10">{
           {
           date}}</div>
                </div>
                <div class="row">
                    <div class="col col-20">
                        姓名:
                    </div>
                    <div class="col col-80">
                        <input type="text" ng-model="a.name" style="border:1px solid black"  >
                    </div>
                </div>
                <div class="row">
                    <div class="col col-20">
                        生日:
                    </div>
                    <div class="col col-80">
                        <input type="text" ng-model="a.date" style="border:1px solid black" >
                    </div>
                </div>
                <div class="row">
                    <div class="col col-20"></div>
                    <div class="col col-20">
                        <button ng-click="psotBirthday()">保存</button>
                    </div>
                    <div class="col col-60"></div>
                </div>
            </ion-list>
        </ion-content>
    </ion-view>

接下来修改AccountCtrl

代码改成这样：

.controller('AccountCtrl', function($scope, birthday) {
        $scope.a = {}
        $scope.psotBirthday = function () {
            console.log($scope.a);
            if (!$scope.a.name && !$scope.a.date) {
                alert("姓名和日期不能为空!");
                return;
            };
            birthday.addBirthday($scope.a);
            $scope.a.name = '';
            $scope.a.date = '';
        }
    });

效果图：在此页面输入　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　再点击Status显示如下：

![272124323911612.png][]                             ![272126261252000.png][]

OK到现在，我已经把通过pouchdb和SQLite在手机本地存储数据，取出数据的过程已经演示完成。至于删除也很简单的。

pouchdb官方API地址：http://pouchdb.com/api.html\#delete\_document

[272124323911612.png]: https://images0.cnblogs.com/blog2015/771317/201507/272124323911612.png
[272126261252000.png]: /images/20220522/b9696c8776414d078395b5b0c7b77a75.png