在 Ionic 2+ 中使用存储

发表 admin at 2024年8月26日

类别

未分类

标签

Ionic 的 LocalStorage 在 Ionic 2+ 中现在被简称为 Storage，Storage 在后台决定存储数据的最佳方法。例如，在手机上，SQLite 是首选的存储方法。在浏览器中，渐进式 Web 应用使用 IndexedDB、WebSQL 或 localstorage。

存储是保存数据或 Json 对象的键/值对的最简单方法。以下是如何在 Ionic 2+ 应用中使用它。

安装

首先，使用以下命令安装 SQLite Cordova 插件：

$ cordova plugin add cordova-sqlite-storage --save

然后安装存储。如果你使用的 Ionic 2 版本高于 RC0，则可以跳过此步骤，因为存储现在已自动包含在内：

$ npm install --save @ionic/storage

导入 + 注入

将其导入到适当的模块中，例如应用程序根模块：

模块：app.module.ts

...
import { IonicStorageModule } from '@ionic/storage';

然后将其注入到需要它的组件中：

组件：team.ts

...
import { Storage } from '@ionic/storage';

export class TeamPage {
  constructor(public navCtrl: NavController, public storage: Storage) { }

用法

现在您可以开始使用 Storage 的放，得到和消除方法。让我们使用一个简单的例子，其中我们有三个方法，一个将球队设置为收藏，一个将球队从收藏中删除，一个检查球队是否是收藏：

组件：team.ts

fav() {
  this.storage.set(`team ${ this.teamId }`, this.teamName);
  this.favorite = true;
}

removeFav() {
  this.storage.remove(team ${ this.teamId });
  this.favorite = false;
}

在该示例中，是最爱方法可以用于ionViewWillEnter页面生命周期挂钩来确定某个团队是否已经受到喜爱。