如何在 ionic 5 中使用本机存储

Question

我希望你没事，我需要一些帮助。所以在这里，在我的应用程序中，我制作了一个函数，当您按下按钮时，允许您将主题从浅色更改为深色。它运行良好，但是当您重新启动应用程序时，主题会自动恢复亮起。你知道我如何使用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

对于您的情况。

1.您需要有一个默认主题，然后假设灯光是默认主题。

每当您更改主题时，都会 2.Store 主题：

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

3. 检索 ngOnInit 生命周期事件中的存储主题值。

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

4.将主题切换方法更改为参数化输入集主题方法：

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)
}
}

在步骤 2 中调用相同的方法以在从存储集主题(主题(获取主题时设置主题

5.In Html 使用以下内容

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

Answer 2

你已经注入了 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

希望这有帮助。