Ionic 3 Storage：如何正确获取JSON对象数组？

嘿，我来帮你搞定这个问题！在Ionic 3里用Storage处理JSON数组其实很简单，核心就是把数组转成字符串存储，取出来再转成数组，下面是一步步的完整实现：

第一步：确保Storage已正确配置 #

首先得确认你已经安装了必要的依赖并在项目中配置好Storage：

1. 安装依赖：

ionic cordova plugin add cordova-plugin-sqlite-storage
npm install --save @ionic/storage

2. 在app.module.ts中导入并配置：

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
// 导入Storage模块
import { Storage } from '@ionic/storage';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  // 把Storage添加到 providers 中
  providers: [Storage]
})
export class AppModule {}

第二步：在HomePage中实现存储与获取逻辑 #

接下来在你的HomePage里，我们来写具体的存储和获取方法：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  localarray: any = [];
  // 你要存储的国家数组
  countries = [
    {record_id: "1", local_TimeStamp: "16:00:00", country: "USA"},
    {record_id: "2", local_TimeStamp: "17:00:00", country: "Japan"},
    {record_id: "3", local_TimeStamp: "17:00:00", country: "Korea"},
    {record_id: "4", local_TimeStamp: "15:00:00", country: "Thailand"},
    {record_id: "5", local_TimeStamp: "16:00:00", country: "China"}
  ];

  constructor(public navCtrl: NavController, private storage: Storage) {}

  // 页面加载时自动获取存储的数据
  ionViewDidLoad() {
    this.loadCountries();
  }

  // 存储国家数组
  saveCountries() {
    // 把JSON数组转成字符串（Storage仅支持字符串存储）
    this.storage.set('countries', JSON.stringify(this.countries))
      .then(() => {
        console.log('国家数据已成功存储');
      })
      .catch(err => {
        console.error('存储失败:', err);
      });
  }

  // 获取存储的国家数组
  loadCountries() {
    this.storage.get('countries')
      .then(data => {
        if (data) {
          // 把字符串转回JSON数组
          this.localarray = JSON.parse(data);
          console.log('获取到的国家数据:', this.localarray);
        } else {
          // 首次打开APP时无存储数据的处理逻辑
          console.log('暂无存储的国家数据');
          // 也可以在这里调用saveCountries()来初始化存储
          // this.saveCountries();
        }
      })
      .catch(err => {
        console.error('获取数据失败:', err);
      });
  }
}

关键注意点 #

• Storage只能存储字符串类型的数据，所以必须用JSON.stringify()把数组转成字符串再存储，取出来时用JSON.parse()转回来。
• 一定要处理get()方法返回null的情况（比如第一次打开APP还没存储过数据的时候），避免解析错误。
• 用Promise的then()和catch()来处理异步操作的成功和失败情况，确保代码的健壮性。

你可以根据自己的需求，比如在页面初始化时调用loadCountries()，或者在某个按钮点击时调用saveCountries()来存储数据。

内容的提问来源于stack exchange，提问作者LHLK