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

Question

你好:)我是编程新手，最近我开始使用IONIC App。但是我卡住了。我想做一些像电话簿这样的东西，你可以随机获得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数据库中，并将其显示在我的本地联系人＆＃34;中。

<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是由离子团队创建和维护的软件包，用于从每个浏览器或平台的细节中抽象开发，并自动使用最佳的存储解决方案。

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。将存储注入组件

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 */})
});