当前位置: 首页 > 科技观察

从微信小程序到鸿蒙JS开发——存储缓存&自动登录

时间:2023-03-22 11:27:40 科技观察

更多内容请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com在应用开发过程中,我们经常需要缓存一些数据本地化,提升用户体验。例如,在电商APP中,如果希望用户登录成功后下次打开APP时自动登录,就需要将用户信息存储在缓存中。鸿蒙JS开发模型提供了操作数据缓存的API。首先,需要导入存储模块。importstoragefrom'@system.storage';添加缓存的API是storage.set(),指定key和value,用户登录成功后将用户名和密码缓存到本地://loginlogin(){fetch.fetch({url:this.url+"/user/login?phone="+this.phone+"&pwd="+this.pwd,responseType:"json",success:res=>{letdata=JSON.parse(res.data);控制台.info(JSON.stringify(data));if(0!=data.code){prompt.showToast({message:data.msg,duration:3000})}else{letuserInfo=data.data;......//写缓存storage.set({key:"userPhone",value:userInfo.mobile});storage.set({key:"userPwd",value:userInfo.password})}}})},注意数据缓存鸿蒙JS的API是通过key:value访问的,value只能是string类型。如果存储其他类型,也不会失败进入fail回调,但是使用get()时会获取不到对应的值。进入应用程序时,可以调用storage.get()获取缓存中的用户信息,通过给定的key,在成功回调中返回对应的值。获取用户信息,调用登录方法,实现自动登录功能。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();}},效果如下:删除缓存中数据的接口为storage.delete(),可以通过指定键数据来删除对应的键。该方法在IDE中没有提示(猜测是重复delete关键字),但经过实验可以正常使用。用户退出后,缓存中的用户信息应该被清空。对应的方法如下://注销exitLogin(){prompt.showDialog({title:"Prompt",message:"Areyousuretologout?",buttons:[{text:"OK",color:"#E20A0B"},{text:"Cancel",color:"#666666"}],success:res=>{if(res.index==0){...//删除缓存存储中的用户信息.delete({key:"userPhone"});storage.delete({key:"userPwd"});this.userInfo=null;}}})}注销后再次进入app,不会自动删除loggedin:另外storage.clear()方法用于清除所有数据缓存。微信小程序提供了类似的操作数据缓存的方法,分为同步方法和异步方法,数据的值可以是任何可以通过JSON.stringify序列化的对象。因此,在从微信小程序转为鸿蒙JS开发时,踩到了数据缓存的坑。鸿蒙存储的值只能是string,但提供文件存储,具有更强大的数据存储能力。更多信息请访问:Harmonyos.51cto.com,与华为官方合作打造的鸿蒙技术社区