從微信小程序到鴻蒙js開發【12】——storage緩存&自動登陸

鴻蒙入門指南，小白速來！從萌新到高手，怎樣快速掌握鴻蒙開發？【課程入口】

正文：json

在應用開發時，咱們常須要將一些數據緩存到本地，以提高用戶體驗。好比在一個電商的app中，若是但願用戶登陸成功後，下次打開app能夠自動登陸，就須要將用戶信息存儲到緩存中。小程序

鴻蒙JS開發模式提供了操做數據緩存的API，首先需導入storage模塊。微信小程序

import storage from '@system.storage';

添加緩存的API爲storage.set( )，指定key和value，在用戶登陸成功後將用戶名和密碼緩存到本地：緩存

// 登陸
    login() {
        fetch.fetch({
            url: this.url + "/user/login?phone=" + this.phone + "&pwd=" + this.pwd,
            responseType: "json",
            success: res => {
                let data = JSON.parse(res.data);
                console.info(JSON.stringify(data));
                if (0 != data.code) {
                    prompt.showToast({
                        message: data.msg,
                        duration: 3000
                    })
                } else {
                    let userInfo = data.data;
                    ......
                    // 寫入緩存
                    storage.set({
                        key: "userPhone",
                        value: userInfo.mobile
                    });
                    storage.set({
                        key: "userPwd",
                        value: userInfo.password
                    })
                }
            }
        })
    },

注意，鴻蒙JS的數據緩存API是以key:value進行存取的，value只能爲string類型。如存儲其餘類型，並不會失敗而進入fail回調，但在使用get( )的時候會沒法取到對應value的。微信

在進入app時，即可調用storage.get( )取出緩存中的用戶信息，經過給定key，在success回調中會返回對應的value。取到用戶信息後並調用登陸方法實現自動登陸功能。app

onShow() {
        // 從其餘頁面跳轉回來，清除頁面棧
        router.clear();
        // 從緩存取用戶信息，自動登陸
        storage.get({
            key: "userPhone",
            success: data => {
                if (data) {
                    this.phone = data;
                    storage.get({
                        key: "userPwd",
                        success: data => {
                            if (data) {
                                this.pwd = data;
                                this.login();
                            }
                        }
                    })
                }
            }
        })
        // 查詢購物車數量
        if (this.userInfo && this.userInfo.id) {
            this.countCarts();
        }
    },

效果以下：異步

刪除緩存中數據的API爲storage.delete( )，指定key便可刪除對應數據。此方法在IDE中無提示(猜想是和delete關鍵詞重複了)，但經實驗是能夠正常使用的。fetch

在用戶退出登陸後，應清除緩存中的用戶信息。對應方法以下：this

// 退出登陸
    exitLogin() {
        prompt.showDialog({
            title: "提示",
            message: "確認退出登陸嗎?",
            buttons: [
                {
                    text: "肯定",
                    color: "#E20A0B"
                },
                {
                    text: "取消",
                    color: "#666666"
                }
            ],
            success: res => {
                if (res.index == 0) {
                    ......
                    // 刪除緩存中用戶信息
                    storage.delete({
                        key: "userPhone"
                    });
                    storage.delete({
                        key: "userPwd"
                    });
                    this.userInfo = null;
                }
            }
        })
    }

退出登陸事後再次進入app，就不會自動登陸了：url

此外還有storage.clear( )方法用於清空全部的數據緩存。

微信小程序提供了相似的操做數據緩存的方法，分爲同步方法和異步方法，且數據的value可爲任何可以經過JSON.stringify序列化的對象。所以在從微信小程序切換到鴻蒙JS開發時，在數據緩存這裏踩了坑。鴻蒙storage的value只能爲string，但其提供了文件存儲，擁有更強大的數據存儲能力。

《從微信小程序到鴻蒙js開發》系列文章合集

做者：Chris.