如何在 ionic 5 中使用原生存储

Question

希望你一切都好，我需要一些帮助。所以在这里，在我的应用程序中我做了一个功能，当你按下一个按钮时，允许你将主题从浅色更改为深色。它运行良好，但是当您重新启动应用程序时，主题会自动 returns 点亮。您知道我如何使用 ionic 的本机存储来录制（我猜是弦乐主题）吗？

import { Component } from '@angular/core';
import { NativeStorage } from '@ionic-native/native-storage/ngx'
import { EmailComposer } from '@ionic-native/email-composer/ngx';



@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page {
theme:string = "light";

  constructor(public nativeStorage:NativeStorage, private emailComposer: EmailComposer) {}

  switchTheme(){
    if(this.theme=='light'){
      document.body.classList.add("dark");
      this.theme="dark";
      console.log(this.theme)
    } else {
      document.body.classList.remove("dark");
      this.theme='light';
      console.log(this.theme)
    }
  }

  sendEmail() {
    let email = {
      to:'my-mail',
      subject: 'My Feedback',
      isHtml: true 
    };

    this.emailComposer.open(email);
  }

}

非常感谢。

Answer 1

您已注入 NativeStorage - 只需使用它即可。

来自官方文档：

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

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

看这里： https://ionicframework.com/docs/native/native-storage

希望对您有所帮助。

Answer 2

为您服务。

1.You 需要有一个默认主题，然后假设 light 是默认主题。

2.Store 每次更改时都会在 sotrage 中添加主题 :

let themeSet = 'light';
this.nativeStorage.setItem('storedTheme', {theme: themeSet})
  .then(
    () => console.log('Stored item!'),
    error => console.error('Error storing item', error)
  );

在 ngOnInit 生命周期事件中检索 storedTheme 值。

ngOnInit {
   this.nativeStorage.getItem('storedTheme')
   .then(
     data => console.log(data),//set theme here
    error => console.error(error)
  );}

4.Change theme Switch Method to parameterized input setTheme 方法：

  setTheme(theme){
    if(theme=='dark'){
      document.body.classList.add("dark");
      this.theme="dark";
      //save in storage
    } else {
      document.body.classList.remove("dark");
      this.theme='light';
      console.log(this.theme)
    }
  }

当您从 Storage setTheme(theme) 中获取主题时，调用第二步中的相同方法设置主题

5.In Html 使用以下

    (click)="theme=='light'? setTheme('dark'):setTheme('light')"

如何在 ionic 5 中使用原生存储

How to use the native storage in ionic 5

typescript

ionic-framework

storage

native

ionic5