qrcode

马上订阅,开启修仙之旅

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 插件:

1
$ ionic cordova plugin add cordova-sqlite-storage

接下来,安装 @Ionic/storage:

1
$ npm install --save @ionic/storage

然后,导入 IonicStorageModule 并把它添加到根模块 NgModule 的 imports 列表中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [
// ...
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
// ...
],
providers: [
// ...
]
})
export class AppModule {}

之后,你就可以在页面或组件中注入 Storage 服务:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 以上的版本才支持:

1
2
this.storage.ready().then((db) => {
});

若需要保存数据,则可以调用 set(key, value) 方法:

1
this.storage.set('name', 'semlinker');

若想要获取上面已存储的 name 信息,你可以调用 get(key) 方法:

1
2
3
4
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) 方法:

1
2
3
this.storage.remove('name').then(() => {
console.log('Name item has been removed');
});

下面我们继续来介绍如何配置 IonicStorageModule 模块。

配置 Storage

你可以使用特定的存储引擎优先级配置存储引擎,也可以将自定义配置项配置为 localForage。更多的选项,请参阅 localForage 配置文档:https://github.com/localForage/localForage#configuration

注意:任何自定义配置将与默认配置合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
declarations: [...],
imports: [
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})
],
bootstrap: [...],
entryComponents: [...],
providers: [...]
})
export class AppModule { }

IonicStorageModule 源码分析

IonicStorageModule 定义

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
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() 方法进行初始化操作:

1
2
3
4
IonicStorageModule.forRoot({
name: '__mydb',
driverOrder: ['indexeddb', 'sqlite', 'websql']
})

storageConfig 对象除了包含 name 和 driverOrder 属性外,还支持其它的属性,StorageConfig 接口的定义如下:

1
2
3
4
5
6
7
8
9
export interface StorageConfig {
name?: string;
version?: number;
size?: number;
storeName?: string;
description?: string;
driverOrder?: string[]; // 存储引擎的应用顺序
dbKey?: string;
}

在 IonicStorageModule 模块内,配置了两个 provider:

1
2
3
4
5
6
7
8
providers: [
{ provide: StorageConfigToken, useValue: storageConfig },
{
provide: Storage,
useFactory: provideStorage,
deps: [StorageConfigToken]
}
]

第一个 provider 使用 useValue 的方式进行注册,这里 StorageConfigToken 的定义如下:

1
2
3
export const StorageConfigToken = new InjectionToken<any>(
'STORAGE_CONFIG_TOKEN'
);

第二个 provider 使用 useFactory 的方式进行注册,对应的工厂函数 provideStorage 定义如下:

1
2
3
4
export function provideStorage(storageConfig: StorageConfig): Storage {
const config = !!storageConfig ? storageConfig : getDefaultConfig();
return new Storage(config);
}

provideStorage 函数内部,会先判断 storageConfig 是否有效,如果无效的时候,会使用通过调用 getDefaultConfig() 方法获取默认的配置:

1
2
3
4
5
6
7
8
export function getDefaultConfig() {
return {
name: '_ionicstorage',
storeName: '_ionickv',
dbKey: '_ionickey',
driverOrder: ['sqlite', 'indexeddb', 'websql', 'localstorage']
};
}

下面我们来分析一下最核心的 Storage 类。

Storage 类

Storage 构造函数

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
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() 方法转换成相应的驱动:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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() 方法的实现很简单:

1
2
3
4
5
6
7
get driver(): string | null { // 私有属性 _driver getter 方法
return this._driver;
}

ready(): Promise<LocalForage> {
return this._dbPromise; // _dbPromise: Promise<LocalForage>;
}

下面来看一下我们常用的 get、set 和 remove 等方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 获取与给定键相关联的值,返回 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());
}

最后我们来看一下剩下的三个方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取已存储项的个数,返回 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 这个库。


欢迎小伙伴们订阅前端修仙之路,及时阅读 Angular、RxJS、TypeScript 和 Node.js 最新文章。

qrcode