ionic3学习之记住密码登录
准备工作:
先看下,重点看下存储数据在 storage 中 ionic3学习之登录页
登录的逻辑处理
我们需要将用户登录是否记住密码记录下来
图示:
login.ts
_login(username: HTMLInputElement, password: HTMLInputElement){
// 记录用户是否记住密码
let data = {username: username.value, password: password.value, isRemember: this.isRemember};
// 储存用户信息
this.settings.setValue("USER_INFO", JSON.stringify(data));
// 界面跳转
let modal = this.modalCtrl.create(TabsPage, data);
modal.present();
}
修改程序逻辑
我们需要理解的就是,在进入界面的时候,判断缓存中是否有记录是否记住密码
,根据这个来判断进入哪个界面
进入 src/app/ 下,修改 app.component.ts
// 引入对应 storage 的文件包
import {Storage} from '@ionic/storage';
// 在 constructor 构造方法中增加逻辑
storage.ready().then(() => {
storage.get('USER_INFO').then(
(value: string) => {
let isRemember = !!value ? JSON.parse(value).isRemember : false;
if ( isRemember ) {
this.rootPage = TabsPage;
} else {
this.rootPage = LoginPage;
}
}
);
});
说明
关于 storage 的小知识
import {Storage} from "@ionic/storage";
constructor(public storage: Storage) {
}
我们使用的是 ionic
的 storage
,而不是浏览器自带的 storage
。
官方文档上面有一句话:
When running in a native app context, Storage will prioritize using SQLite, as it’s one of the most stable and widely used file-based databases, and avoids some of the pitfalls of things like localstorage and IndexedDB, such as the OS deciding to clear out such data in low disk-space situations.
在本地应用程序环境中运行时,存储将优先使用SQLite,因为它是最稳定和广泛使用的基于文件的数据库之一,并且避免了诸如localstorage和IndexedDB之类的一些陷阱,例如操作系统决定清除这种数据在低磁盘空间的情况下。
文档连接:https://ionicframework.com/docs/storage/
附
完整的代码如下:
import {Component} from '@angular/core';
import {Platform} from 'ionic-angular';
import {Storage} from '@ionic/storage';
import {StatusBar} from '@ionic-native/status-bar';
import {SplashScreen} from '@ionic-native/splash-screen';
import {LoginPage} from "../pages/login/login";
import {TabsPage} from "../pages/tabs/tabs";
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any;
constructor(platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen,
storage: Storage,) {
/* 当storage准备就绪之后,判断 USER_INFO 中是否记录登录状态 */
storage.ready().then(() => {
storage.get('USER_INFO').then(
(value: string) => {
let isRemember = !!value ? JSON.parse(value).isRemember : false;
if ( isRemember ) {
this.rootPage = TabsPage;
} else {
this.rootPage = LoginPage;
}
}
);
});
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
}