更改.ts文件中的值并将其保存在appionic中

时间:2018-05-12 15:21:38

标签: angular ionic-framework save local

我的应用将数据存储在.ts文件中。函数允许更改此文件中的布尔值(显示)。有没有办法在文件中保存这些更改?如果用户关闭应用程序并重新打开它,我希望保存这些值。

cards.ts

    export default
  {
    "cards": [
      {
        "id": "1",
        "question": "blabla",
        "answer": "blablabla",
        "hint": "blablablabla",
        "displayed": false,
...
      },
    ]
  };

cards.interface.ts

  export interface Card {
  id: string;
  question: string;
  answer: string;
  hint: string;
  displayed: boolean;
}

更改值的功能

getRandom() {
    this.answerVisible = false;
    this.availableCards = this.cards.filter(card => !card.displayed);
    let rd = Math.floor(Math.random() * this.availableCards.length);
    this.randomCard = this.availableCards[rd];
    this.cards.find(card => card.id === this.randomCard.id).displayed = true;
  }
}

1 个答案:

答案 0 :(得分:0)

使用localStorage,其中数据一直存在,直到用户手动清除浏览器缓存或Web应用程序清除数据为止。
在使用SQLite的Ionic应用程序时,建议您使用 Ionic Storage 在本机应用程序上下文中运行时,以及在Web上运行时或作为渐进式Web应用程序,存储将尝试使用IndexedDBWebSQLlocal storage

用法:

npm install --save @ionic/storage

在根模块的导入数组中注册

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

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

最后,将其注入您的任何组件或页面:

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

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

PS:请参阅链接以获取清晰的图片和用法