我如何将数据传递到我的 SQLite 数据库中

Question

你好 :) 我对编程很陌生，最近我开始了一个 IONIC 应用程序。然而我被卡住了。我想做一个电话簿之类的东西，您可以在其中获取随机 JSON 联系人并将它们保存到您的 sqlite 数据库。

我知道了：

import { Storage ] from '@ionic/storage';
    @component({
        selector: 'page-home'
        templateUrl: 'home.html'
});

export class HomePage {

  posts: any;
  persons: any;

constructor(public navCtrl: NavController, public http: Http, public storage: Storage) {

  this.http.get('https://jsonplaceholder.typicode.com/users').map(res=> res.json()).subscribe(data => {
  this.posts = data;
 });

}

//here i would like to recieve the data from the tapped Item

  setData(){
    console.log();
        this.storage.set('myData', this.posts);
        console.log(this.posts);
  };


  getData(){
     this.storage.get('myData').then((data) => {
       if (data !=null){
         console.log(data);
       }
    })
  };
}

这是视图： 当我单击/点击保存按钮时，我想将值存储在我的 sqlite 数据库中并将它们显示在我的“本地联系人”中。

<ion-content>
        <ion-list>
            <ion-item *ngFor="let post of posts">
                <ion-list>
                    <ul><h1>{{post.name}}</h1></ul>
                    <ul><p>{{post.username}}, {{post.email}}</p></ul>
                    <ul><p>phone: {{post.phone}}</p></ul>
                    <button ion-button (click)="setData()">Set Data</button>
                </ion-list>
            </ion-item>
        </ion-list>
    </ion-content>

也许有人遇到过类似的问题，可以帮助我解决这个问题。 谢谢:)

Answer 1

使用 Ionic 处理持久存储的最佳方法是使用 ionic-storage。

Ionic Storage 是由 ionic 团队创建和维护的一个包，用于从每个浏览器或平台的具体细节中抽象出开发，并自动使用可用的最佳存储解决方案。

1.安装依赖项

对于 SQLite，您需要先安装 Angular 和 Cordova 的依赖项：

npm install @ionic/storage --save

和

cordova plugin add cordova-sqlite-storage --save

然后在 src/app/app.module.ts 中编辑您的 NgModule 声明，将 IonicStorageModule 添加为导入：

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

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

2。将 Storage 注入到你的组件中

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public storage: Storage) {}
}

3。在 SQLite 中存储数据

每当您访问存储时，请确保始终将您的代码包装在以下内容中：

storage.ready().then(() => { /* code here safely */});

3.1 保存键值对

storage.ready().then(() => {
    storage.set('some key', 'some value');
});

3.2 检索值

storage.ready().then(() => {
  storage.get('age').then((val: string) => {
      console.log('Your age is', val);
  });
});

3.3 删除键值对

storage.ready().then(() => {
    storage.remove('key').then((key: string) => { /* do something after deletion */})
});