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

想了解更多内容，请访问：

从网站建设到定制行业解决方案，为提供成都网站建设、网站设计服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联公司将不断加快创新步伐，提供优质的建站服务。

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

在应用开发时，我们常需要将一些数据缓存到本地，以提升用户体验。比如在一个电商的app中，如果希望用户登录成功后，下次打开app可以自动登录，就需要将用户信息存储到缓存中。

鸿蒙JS开发模式提供了操作数据缓存的API，首先需导入storage模块。

 
 
 
 
    
  
  
  
  
  1. import storage from '@system.storage';
    2.

添加缓存的API为storage.set( )，指定key和value，在用户登录成功后将用户名和密码缓存到本地：

 
 
 
 
    
  
  
  
  
  1. // 登录
    2. 
  
  
  
  
  2.     login() {
    3. 
  
  
  
  
  3.         fetch.fetch({
    4. 
  
  
  
  
  4.             url: this.url + "/user/login?phone=" + this.phone + "&pwd=" + this.pwd,
    5. 
  
  
  
  
  5.             responseType: "json",
    6. 
  
  
  
  
  6.             success: res => {
    7. 
  
  
  
  
  7.                 let data = JSON.parse(res.data);
    8. 
  
  
  
  
  8.                 console.info(JSON.stringify(data));
    9. 
  
  
  
  
  9.                 if (0 != data.code) {
    10. 
  
  
  
  
  10.                     prompt.showToast({
    11. 
  
  
  
  
  11.                         message: data.msg,
    12. 
  
  
  
  
  12.                         duration: 3000
    13. 
  
  
  
  
  13.                     })
    14. 
  
  
  
  
  14.                 } else {
    15. 
  
  
  
  
  15.                     let userInfo = data.data;
    16. 
  
  
  
  
  16.                     ......
    17. 
  
  
  
  
  17.                     // 写入缓存
    18. 
  
  
  
  
  18.                     storage.set({
    19. 
  
  
  
  
  19.                         key: "userPhone",
    20. 
  
  
  
  
  20.                         value: userInfo.mobile
    21. 
  
  
  
  
  21.                     });
    22. 
  
  
  
  
  22.                     storage.set({
    23. 
  
  
  
  
  23.                         key: "userPwd",
    24. 
  
  
  
  
  24.                         value: userInfo.password
    25. 
  
  
  
  
  25.                     })
    26. 
  
  
  
  
  26.                 }
    27. 
  
  
  
  
  27.             }
    28. 
  
  
  
  
  28.         })
    29. 
  
  
  
  
  29.     },
    30.

注意，鸿蒙JS的数据缓存API是以key:value进行存取的，value只能为string类型。如存储其他类型，并不会失败而进入fail回调，但在使用get( )的时候会无法取到对应value的。

在进入app时，便可调用storage.get( )取出缓存中的用户信息，通过给定key，在success回调中会返回对应的value。取到用户信息后并调用登录方法实现自动登录功能。

 
 
 
 
    
  
  
  
  
  1. onShow() {
    2. 
  
  
  
  
  2.       // 从其他页面跳转回来，清除页面栈
    3. 
  
  
  
  
  3.       router.clear();
    4. 
  
  
  
  
  4.       // 从缓存取用户信息，自动登录
    5. 
  
  
  
  
  5.       storage.get({
    6. 
  
  
  
  
  6.           key: "userPhone",
    7. 
  
  
  
  
  7.           success: data => {
    8. 
  
  
  
  
  8.               if (data) {
    9. 
  
  
  
  
  9.                   this.phone = data;
    10. 
  
  
  
  
  10.                   storage.get({
    11. 
  
  
  
  
  11.                       key: "userPwd",
    12. 
  
  
  
  
  12.                       success: data => {
    13. 
  
  
  
  
  13.                           if (data) {
    14. 
  
  
  
  
  14.                               this.pwd = data;
    15. 
  
  
  
  
  15.                               this.login();
    16. 
  
  
  
  
  16.                           }
    17. 
  
  
  
  
  17.                       }
    18. 
  
  
  
  
  18.                   })
    19. 
  
  
  
  
  19.               }
    20. 
  
  
  
  
  20.           }
    21. 
  
  
  
  
  21.       })
    22. 
  
  
  
  
  22.       // 查询购物车数量
    23. 
  
  
  
  
  23.       if (this.userInfo && this.userInfo.id) {
    24. 
  
  
  
  
  24.           this.countCarts();
    25. 
  
  
  
  
  25.       }
    26. 
  
  
  
  
  26.   },
    27.

效果如下：

删除缓存中数据的API为storage.delete( )，指定key即可删除对应数据。此方法在IDE中无提示(猜测是和delete关键词重复了)，但经实验是可以正常使用的。

在用户退出登录后，应清除缓存中的用户信息。对应方法如下：

 
 
 
 
    
  
  
  
  
  1. // 退出登录
    2. 
  
  
  
  
  2.   exitLogin() {
    3. 
  
  
  
  
  3.       prompt.showDialog({
    4. 
  
  
  
  
  4.           title: "提示",
    5. 
  
  
  
  
  5.           message: "确认退出登录吗?",
    6. 
  
  
  
  
  6.           buttons: [
    7. 
  
  
  
  
  7.               {
    8. 
  
  
  
  
  8.                   text: "确定",
    9. 
  
  
  
  
  9.                   color: "#E20A0B"
    10. 
  
  
  
  
  10.               },
    11. 
  
  
  
  
  11.               {
    12. 
  
  
  
  
  12.                   text: "取消",
    13. 
  
  
  
  
  13.                   color: "#666666"
    14. 
  
  
  
  
  14.               }
    15. 
  
  
  
  
  15.           ],
    16. 
  
  
  
  
  16.           success: res => {
    17. 
  
  
  
  
  17.               if (res.index == 0) {
    18. 
  
  
  
  
  18.                   ......
    19. 
  
  
  
  
  19.                   // 删除缓存中用户信息
    20. 
  
  
  
  
  20.                   storage.delete({
    21. 
  
  
  
  
  21.                       key: "userPhone"
    22. 
  
  
  
  
  22.                   });
    23. 
  
  
  
  
  23.                   storage.delete({
    24. 
  
  
  
  
  24.                       key: "userPwd"
    25. 
  
  
  
  
  25.                   });
    26. 
  
  
  
  
  26.                   this.userInfo = null;
    27. 
  
  
  
  
  27.               }
    28. 
  
  
  
  
  28.           }
    29. 
  
  
  
  
  29.       })
    30. 
  
  
  
  
  30.   }
    31.

退出登录过后再次进入app，就不会自动登录了：

此外还有storage.clear( )方法用于清空所有的数据缓存。

微信小程序提供了类似的操作数据缓存的方法，分为同步方法和异步方法，且数据的value可为任何能够通过JSON.stringify序列化的对象。因此在从微信小程序切换到鸿蒙JS开发时，在数据缓存这里踩了坑。鸿蒙storage的value只能为string，但其提供了文件存储，拥有更强大的数据存储能力。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.

本文名称：从微信小程序到鸿蒙JS开发-storage缓存&自动登录
URL地址：http://www.hantingmc.com/qtweb/news44/265094.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

分类信息网

网站制作　　 　成都电信服务器托管　　 　保温橡塑管　　 　成都网站制作　　 　成都微信小程序开发　　 　ios开发　　 　平昌保洁　　 　成都网站推广　　 　移动服务器托管　　 　成都网站建设哪家好　　 　电信机房托管　　 　成都免费网站建设公司　　 　绵阳机房托管　　 　雅安服务器托管　　 　宣威网站建设　　 　犀浦防纹窗　　 　成都微信开发　　 　重庆网站制作　　 　云服务器　　 　网站建设开发