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

本文转自：http://www.cnblogs.com/ailen226/p/ionic.html

首先声明，本教程参考国外网站（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中。

?

1 2 3 4 5 6 7 8

//安装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 末尾去掉分号，添加一下代码。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.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准备好之后初始化数据库

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

.run(function($ionicPlatform<span style="background-color: rgb(255, 0, 255);">, birthday</span>) {   $ionicPlatform.ready(function() {     <span style="background-color: rgb(255, 0, 255);">birthday.initDB();</span>     // 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中的代码修改如下：

?

1 2 3 4 5 6 7 8 9 10 11 12

<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中修改如下：

?

1 2 3 4 5 6 7 8 9 10

.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的页面代码改成这样

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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

　　代码改成这样：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

.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显示如下：

                             

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

　　　　　我相信你可以自己去查看官方文档，自己去实现的！

　　pouchdb官方API地址：http://pouchdb.com/api.html#delete_document