获取ionic 2后编辑并存储json

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  data: any = {};

  constructor() {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    // 尝试从 localStorage 获取数据
    const storedData = localStorage.getItem('myData');
    if (storedData) {
      this.data = JSON.parse(storedData);
    } else {
      // 如果没有找到数据，初始化为空对象
      this.data = {};
    }
  }

  saveData() {
    // 将数据转换为 JSON 字符串并存储到 localStorage
    localStorage.setItem('myData', JSON.stringify(this.data));
  }

  updateData(key: string, value: any) {
    // 更新数据对象
    this.data[key] = value;
    // 保存更新后的数据
    this.saveData();
  }
}

<ion-header>
  <ion-toolbar>
    <ion-title>JSON Editor</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item *ngFor="let key of Object.keys(data)">
    <ion-label>{{ key }}</ion-label>
    <ion-input [(ngModel)]="data[key]" (ionChange)="updateData(key, data[key])"></ion-input>
  </ion-item>
  <ion-button (click)="saveData()">Save Data</ion-button>
</ion-content>