从微信小程序到鸿蒙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.