Ionic 3 Cordova Native Storage 存储修改后的数据答案

【问题标题】：Ionic 3 Cordova Native Storage storing modified dataIonic 3 Cordova Native Storage 存储修改后的数据
【发布时间】：2018-02-22 13:20:29
【问题描述】：

我正在努力想办法。这是相关代码。

types.json

{
    "types": [ 
        {"name": "Lateral Aids in Navigation", "enabled": false},
        {"name": "Canal Structures", "enabled": true},
        {"name": "Dockage", "enabled": true},
        {"name": "Launch Points", "enabled": true},
        {"name": "Landmarks", "enabled": true}
            ] 
}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Http } from '@angular/http';
import { NativeStorage } from '@ionic-native/native-storage';
import { TabsPage } from '../pages/tabs/tabs';
import 'rxjs/add/operator/toPromise';


@Component({
  templateUrl: 'app.html'
})
export class CanalGuide {
  rootPage:any = TabsPage;
  public types;
  public places;

  constructor(public http: Http, public platform: Platform, public 
statusBar: StatusBar, public splashScreen: SplashScreen, public nativeStorage: 
NativeStorage) {

      platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();  
      this.readyTypes();
      this.readyPlaces();
      splashScreen.hide();
      });
    }
    readyTypes() { return this.http.get('./assets/data/types.json').toPromise().then(
        (types) => { this.nativeStorage.setItem('types', types) }); 
      }

    readyPlaces() { return this.http.get('./assets/data/canalwatertrail.json').toPromise().then(
      (places) => { this.nativeStorage.setItem('places', places) });
      }

  }

settings.ts

 import { Component } from '@angular/core';
 import { Http } from '@angular/http';
 import { NavController } from 'ionic-angular';
 import { NativeStorage } from '@ionic-native/native-storage';

@Component({
  selector: 'page-settings',
  templateUrl: 'settings.html'
})
export class SettingsPage {

public toggles;
public types;

constructor(private http: Http, public navCtrl: NavController, public 
nativeStorage: NativeStorage) {}

ionViewDidEnter() {
    this.nativeStorage.getItem('types').then((data) => {
      this.toggles = JSON.parse(data._body) 
      console.log(this.toggles);  
      });
    }
// The relevant code 
ionViewWillLeave() {
  this.nativeStorage.setItem('types', this.toggles);
  console.log(this.nativeStorage.getItem('types'));
    }

 }

settings.html

  <ion-header>
   <ion-navbar>
    <ion-title>
     Settings
    </ion-title>
  </ion-navbar>
 </ion-header>

 <ion-content>
  <ion-list no-lines *ngIf="toggles">
   <ion-list-header>Atlas Filters</ion-list-header>
     <ion-item *ngFor="let type of toggles.types">
       <ion-label>{{type.name}} - {{type.enabled}}</ion-label>
       <ion-toggle [(ngModel)]="type.enabled"></ion-toggle>
    </ion-item>  
  </ion-list>

我的问题是 - ionViewWillLeave 中的 console.log() 返回以下内容：

t {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
__zone_symbol__state
:
true
__zone_symbol__value
:
{types: Array(5)}
__proto__
:
Object

现在在ionicViewWillLeave 函数中，我如何正确地将对types.json 的修改保存回本机存储，以便可以在nativeStorage.getItem 的不同页面上再次使用它？这个看似简单的功能已经让我发疯了一段时间。

【问题讨论】：

如果您只是使用存储来使用不同页面上的内容。您可以使用 NavigationController 和 navParams 将数据传递到下一页。我还建议使用“Storage”本机插件而不是“NativeStorage”，它更适合 Ionic 3 的使用。

标签： json angular cordova ionic3 cordova-nativestorage

【解决方案1】：

请查看文档：https://ionicframework.com/docs/native/native-storage/

getItem 和 setItem 返回一个承诺，所以你不能简单地记录它。你必须等到承诺得到解决。

this.nativeStorage.setItem('types', {property: 'value', anotherProperty: 'anotherValue'})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

或

this.nativeStorage.getItem('types')
  .then(
    data => console.log(data),
    error => console.error(error)
  );

【讨论】：