來扯點ionic3[7] LocalStorage的使用—以登陸和註銷爲例

通常意義上，一個互聯網 APP 中的數據主自與服務器的交互，可是對於有些數據，咱們但願獲取到它們之後能保存，並在全局環境使用，好比用戶數據——咱們不但願在每一個頁面都從服務器拉取一遍。這時咱們就能夠利用 HTML5 的 localStorage API —— 一個比 cookie 更穩定和高效，且跨瀏覽的一種存儲機制。咱們能夠嘗試模擬登陸的流程來體驗這一 API 的使用。

建立登陸頁面

在 pages 文件夾建立登陸頁面目錄 login，包括 login.ts 和 login.html ，別忘了在 app.module.ts 註冊頁面。

一個簡單的登陸表單

定義數據模型

在 login.ts 定義表單的數據模型，把用戶名和密碼封裝在一個對象中，未來發送 post 請求時能夠直接調用。

export class LoginPage {

    userData:any{
        username:'',
        password:''
    }

    ...

製做模板並完成數據綁定

在 login.html 編寫表單模板，並使用 [(ngModel)] 將每一個項目綁定在數據模型上。

須要先作一些小改造

不少APP是須要強制登陸的，用戶進入這類 APP 時，就會直接進入登陸頁面，只有登陸成功後纔會跳轉到首頁。
若是你用 tabs 模板建立了 ionic 項目，那麼APP是默認進入到 Tabs 頁的，咱們要作一些改造讓它默認進入到登陸頁面。

修改 app.component.ts

app.component.ts 定義了整個 APP 的根頁面，咱們須要把根頁面替換位登陸頁面。

1. 引入LoginPage

import { LoginPage } from '../pages/login/login';

1. 將 rootPage 改成 LoginPage

rootPage:any = LoginPage;

運行 server 後，能夠看到應用直接進入到了登陸界面

利用 LocalStorage 存儲登陸狀態

建立 login 方法

在 LoginPage 類中建立 login 方法，模擬登陸的過程：

login(){
        //模擬驗證登陸
        if(this.userData.username==='test' && this.userData.password==='123456'){
            //將用戶名儲存到 localStorage 中
            window.localStorage.setItem('username',this.userData.username);
            this.navCtrl.setRoot(TabsPage);
        }
    }

假設用戶名爲 test，密碼爲 123456，當二者匹配時，將用戶名存儲到 Storage 中，並跳轉到 Tabs 頁面。

注意:

1. 引入 TabsPage

import { TabsPage } from '../tabs/tabs';

1. 把 NavController 注入到類中：

constructor(private navCtrl:NavController){}

綁定click事件

將組件中的 click 方法綁定到模板按鈕的事件中：

<button ion-button block (click)="login()">登陸</button>

Angular中 (事件名) 用於將模板上的元素和綁定組件中的方法相綁定，即將事件流從模板傳到組件，由於組件裏的方法對外不可見，因此不要使用 onclick 來操做。

爲何用 setRoot 而不是 push

在 [來扯點ionic3[2] 頁面一線牽 珍惜這段緣](http://www.jianshu.com/p/de40... NavController 的 push 方法跳轉頁面，爲什麼這裏使用的倒是另外一個方法 setRoot 呢？由於這兩種方法的原理不一樣，push是將新頁面推送到頁面棧中，新頁面能夠 pop 回舊頁面；而 setRoot 是將原有的根頁面替換成新頁面，至關於換了一個新的頁面棧，原有的頁面已經被回收掉了，這時候新頁面是沒法 pop 回舊頁面的。

在界面表現上，若是是經過 push 進 Tabs 頁面，能夠經過 Android 設備上的返回按鈕回到登陸頁面，這顯然不符合咱們的操做邏輯。

在首頁提取 Storage 的數據

登陸成功後，咱們要在其它頁面上使用用戶的數據，方法很簡單，使用 getItem 將其提取出來就行。

export class HomePage {

    username:string="";

  constructor(public navCtrl: NavController) {}

  ionViewWillEnter(){
      this.username=window.localStorage.getItem('username');
  }

}

將用戶名輸出到模板中：

<ion-content padding>
  <p>歡迎你：{{username}}</p>
</ion-content>

利用登陸狀態進行頁面跳轉

在測試過程當中，你會發現，瀏覽器的每次刷新都要從新登陸。這時，就須要修改在此修改 app.component.ts 添加一個鉤子：判斷 Storage 中存在 username 與否，定義不一樣的 rootPage ：

export class MyApp {
  rootPage:any;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

    if(window.localStorage.getItem('username'))
      this.rootPage=TabsPage;
    else
      this.rootPage=LoginPage;

   platform.ready().then(() => {
     ...

再刷新頁面能夠發現，APP 直接進入首頁了。

清除 Storage 中的用戶信息

在首頁添加註銷按鈕，清除 Storage 中的 username，並跳轉回登陸頁面。
home.ts

logout(){
      window.localStorage.removeItem('username');
      this.navCtrl.setRoot(LoginPage);
  }

home.html

<ion-content padding>
  <p>歡迎你：{{username}}</p>
  <button ion-button round (click)="logout()">註銷</button>
</ion-content>

其它

1. LocalStorage 的數據是沒有過時時間的，只要它沒有被刪除，就會永久地儲存在 Storage 中。若是你但願數據在必定時間內失效，可使用 SessionStorage 來替代。
2. LocalStorage 和 SessionStorage 的存儲空間只有 5MB，請不要存儲大量的數據。
3. 在新版 iOS 中，LocalStorage 可能會在系統清理內存時被清除，在 Android 中也可能發生 LocalStorage 被清楚的狀況。若是你須要更好地存儲方案，能夠考慮使用 SQLlite 來替代。