本文转自：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
[转]ionic 通过PouchDB ＋ SQLite来实现app的本地存储（Local Storage）
原文：http://www.cnblogs.com/freeliver54/p/4990457.html