Ionic3 learning remember password login

Ionic3 learning remember password login

Ready to work:

Let's take a look first, focus on the login page of ionic3 learning in storage data

Logical processing of login

We need to record whether the user remembers the password when logging in

Icon:

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

Modify program logic

What we need to understand is that when entering the interface, we judge whether there is a record 是否记住密码in the cache, and judge which interface to enter based on this.

Go to src/app/ and modify 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;
       }
     }
   );
 });

illustrate

Little knowledge about storage

import {Storage} from "@ionic/storage";
    constructor(public storage: Storage) {
}

We are ionicusing storage, not the one that comes with the browser storage.
There is a sentence on the official document:

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.

When running in a local application environment, storage will prefer SQLite because it is one of the most stable and widely used file-based databases, and avoids some pitfalls like localstorage and IndexedDB, such as the OS deciding to clear this This kind of data is in the case of low disk space.

Documentation link: https://ionicframework.com/docs/storage/

attached

The complete code is as follows:

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