Ionic 开发之 Ionic Storage 详解
Ionic Storage 是一款基于 localForage 用于 Ionic 应用程序的简单 “键-值” 存储模块，支持 SQLite 开箱即用。该工具可以根据平台自动选择最佳的存储引擎，而不用用户关系具体的使用细节。模块内存储引擎的默认选择顺序是 SQLite，IndexedDB，WebSQL 和 LocalStorage。
在原生应用程序环境中运行时，存储方式会优先使用 SQLite 的原因，是因为它最稳定和最广泛使用的文件数据之一，并且避免了诸如 localStorage 和 IndexedDB 之类的一些陷阱，比如在低磁盘空间的情况下会自动清理数据。在实际开发中，如果你想执行任意 SQL 查询，你可以直接使用 Ionic Native SQLite 插件。
接下来，我们先来介绍一下 Ionic Storage 的安转与使用。
安装与使用
首先，如果你想使用 SQLite，请先安装 cordova-sqlite-storage 插件：
$ ionic cordova plugin add cordova-sqlite-storage接下来，安装 @Ionic/storage：
$ npm install --save @ionic/storage然后，导入 IonicStorageModule 并把它添加到根模块 NgModule 的 imports 列表中：
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}之后，你就可以在页面或组件中注入 Storage 服务：
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '@ionic/storage';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(
public navCtrl: NavController,
public storage: Storage) {
}
}为了确保进行数据操作时，存储系统已经初始化完成。你可以在使用前调用 Storage.ready() 方法，不过该方法仅在 1.1.7 以上的版本才支持：
this.storage.ready().then((db) => {
});若需要保存数据，则可以调用 set(key, value) 方法：
this.storage.set('name', 'semlinker');若想要获取上面已存储的 name 信息，你可以调用 get(key) 方法：
this.storage.get('name').then((name) => {
console.log('Me: Hey, ' + name + '! You have a very nice name.');
console.log('You: Thanks! I got it for my birthday.');
});当然，要移除已存储的项目，可以使用 remove(key) 方法：
this.storage.remove('name').then(() => {
console.log('Name item has been removed');
});下面我们继续来介绍如何配置 IonicStorageModule 模块。
配置 Storage
你可以使用特定的存储引擎优先级配置存储引擎，也可以将自定义配置项配置为 localForage。更多的选项，请参阅 localForage 配置文档：https://github.com/localForage/localForage#configuration
注意：任何自定义配置将与默认配置合并
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
declarations: [...],
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...]
})
export class AppModule { }IonicStorageModule 源码分析
IonicStorageModule 定义
import { NgModule, ModuleWithProviders } from '@angular/core';
import {
getDefaultConfig,
provideStorage,
Storage,
StorageConfig,
StorageConfigToken
} from './storage';
export { StorageConfig, StorageConfigToken, Storage };
@NgModule()
export class IonicStorageModule {
static forRoot(storageConfig: StorageConfig = null): ModuleWithProviders {
return {
ngModule: IonicStorageModule,
providers: [
{ provide: StorageConfigToken, useValue: storageConfig },
{
provide: Storage,
useFactory: provideStorage,
deps: [StorageConfigToken]
}
]
};
}
}在前面的配置章节，我们通过调用 forRoot() 方法进行初始化操作：
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})storageConfig 对象除了包含 name 和 driverOrder 属性外，还支持其它的属性，StorageConfig 接口的定义如下：
export interface StorageConfig {
name?: string;
version?: number;
size?: number;
storeName?: string;
description?: string;
driverOrder?: string[]; // 存储引擎的应用顺序
dbKey?: string;
}在 IonicStorageModule 模块内，配置了两个 provider：
providers: [
{ provide: StorageConfigToken, useValue: storageConfig },
{
provide: Storage,
useFactory: provideStorage,
deps: [StorageConfigToken]
}
]第一个 provider 使用 useValue 的方式进行注册，这里 StorageConfigToken 的定义如下：
export const StorageConfigToken = new InjectionToken<any>(
'STORAGE_CONFIG_TOKEN'
);第二个 provider 使用 useFactory 的方式进行注册，对应的工厂函数 provideStorage 定义如下：
export function provideStorage(storageConfig: StorageConfig): Storage {
const config = !!storageConfig ? storageConfig : getDefaultConfig();
return new Storage(config);
}provideStorage 函数内部，会先判断 storageConfig 是否有效，如果无效的时候，会使用通过调用 getDefaultConfig() 方法获取默认的配置：
export function getDefaultConfig() {
return {
name: '_ionicstorage',
storeName: '_ionickv',
dbKey: '_ionickey',
driverOrder: ['sqlite', 'indexeddb', 'websql', 'localstorage']
};
}下面我们来分析一下最核心的 Storage 类。
Storage 类
Storage 构造函数
import { Injectable, InjectionToken, Optional } from '@angular/core';
import LocalForage from 'localforage';
import CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
export class Storage {
private _dbPromise: Promise<LocalForage>;
private _driver: string = null; //
constructor(config: StorageConfig) {
this._dbPromise = new Promise((resolve, reject) => {
let db: LocalForage;
const defaultConfig = getDefaultConfig(); // 获取默认配置
const actualConfig = Object.assign(defaultConfig, config || {}); // 合并配置
LocalForage.defineDriver(CordovaSQLiteDriver)
.then(() => {
db = LocalForage.createInstance(actualConfig); // 创建db实例
})
.then(() =>
db.setDriver(this._getDriverOrder(actualConfig.driverOrder)) // 设置数据库驱动
)
.then(() => {
this._driver = db.driver(); // 返回最终使用的驱动类型
resolve(db);
})
.catch(reason => reject(reason));
});
}
}上面代码中，在调用 db.setDriver() 方法时，会调用内部的 _getDriverOrder() 方法转换成相应的驱动：
private _getDriverOrder(driverOrder) {
return driverOrder.map(driver => {
switch (driver) {
case 'sqlite':
return CordovaSQLiteDriver._driver;
case 'indexeddb':
return LocalForage.INDEXEDDB;
case 'websql':
return LocalForage.WEBSQL;
case 'localstorage':
return LocalForage.LOCALSTORAGE;
}
});
}
// https://github.com/localForage/localForage/blob/master/src/localforage.js
const DefaultDrivers = {
INDEXEDDB: idbDriver,
WEBSQL: websqlDriver,
LOCALSTORAGE: localstorageDriver
};Storage 成员方法
在继续分析之前，我们先来大致浏览一下 Storage 类中定义的成员方法：
- driver() —— 返回 string 或 null，表示正在使用驱动的名称；
- ready() —— 返回
Promise<LocalForage>对象，当存储初始化完成后会进入 resolved 状态； - get(key) —— 获取与给定键相关联的值，返回 Promise 对象；
- set(key, value) —— 设置给定键的值，返回 Promise 对象；
- remove(key) —— 删除与此键关联的值，返回 Promise 对象；
- clear() —— 清除整个键值存储，返回 Promise 对象；
- length() —— 获取已存储对象的个数，返回 Promise 对象；
- keys() —— 返回用存储中的所有键，返回 Promise 对象；
- forEach(iteratorCallback) —— 迭代每个键值对，返回 Promise 对象：
- iteratorCallback —— (value, key, iterationNumber)
driver() 和 ready() 方法的实现很简单：
get driver(): string | null { // 私有属性 _driver getter 方法
return this._driver;
}
ready(): Promise<LocalForage> {
return this._dbPromise; // _dbPromise: Promise<LocalForage>;
}下面来看一下我们常用的 get、set 和 remove 等方法：
// 获取与给定键相关联的值，返回 Promise 对象
get(key: string): Promise<any> {
return this._dbPromise.then(db => db.getItem(key));
}
// 设置给定键的值，返回 Promise 对象
set(key: string, value: any): Promise<any> {
return this._dbPromise.then(db => db.setItem(key, value));
}
// 删除与此键关联的值，返回 Promise 对象
remove(key: string): Promise<any> {
return this._dbPromise.then(db => db.removeItem(key));
}
// 清除整个键值存储，返回 Promise 对象
clear(): Promise<void> {
return this._dbPromise.then(db => db.clear());
}最后我们来看一下剩下的三个方法：
// 获取已存储项的个数，返回 Promise 对象
length(): Promise<number> {
return this._dbPromise.then(db => db.length());
}
// 返回用存储中的所有键，返回 Promise 对象
keys(): Promise<string[]> {
return this._dbPromise.then(db => db.keys());
}
// 迭代每个键值对，返回 Promise 对象
forEach(
iteratorCallback: (value: any, key: string, iterationNumber: Number) => any
): Promise<void> {
return this._dbPromise.then(db => db.iterate(iteratorCallback));
}总结
其实分析完 IonicStorageModule 模块，我们会发现它的内部实现并不复杂。它只是对 localForage 的 API 进行简单的封装，实际的存储功能还是交由 localForage 来完成，感兴趣的小伙伴可以研究一下。实际的开发过程中，在数据存储时，我们可能还会涉及数据响应式、数据加密、数据压缩、数据迁移和备份，有上述需求的同学，可以了解一下 rxdb 这个库。