经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
微信小程序学习笔记之本地数据缓存功能详解
来源:jb51  时间:2019/3/29 11:44:20  对本文有异议

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:

前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。

【将数据存储在本地缓存】wx.setStorage

【读取本地缓存】wx.getStorage

以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token:

login.php:

  1. <?php
  2. header("Content-type:text/html;charset=utf-8");
  3. $arr = array("state"=>0,"data"=>array(),"msg"=>'');
  4. $phone = $_POST['phone'];
  5. $password = $_POST['password'];
  6. if($phone && $password){
  7. //省略验证......
  8.  
  9. //返回登录token
  10. $tokenstr = 'liweishan666';
  11. $token = $phone.time().$tokenstr;//省略加密
  12.  
  13. $arr['state'] = 1;
  14. $arr['msg'] = '登录成功';
  15. $arr['data']['token'] = $token;
  16. }else{
  17. $arr['msg'] = '参数错误';
  18. }
  19. echo json_encode($arr);
  20. die;

login.wxml:

  1. <form bindsubmit="formSubmit" bindreset="formReset">
  2. <view>
  3. 手机号:<input type="text" name="phone" placeholder="请输入账号" confirm-type="done" />
  4. 密码:<input password type="number" name="password" placeholder="请输入6位密码" maxlength="6" />
  5. </view>
  6. <view class="btn-area">
  7. <button formType="submit">登录</button>
  8. </view>
  9.  
  10. <view class="btn-area">
  11. <button bindtap="gettoken">读取缓存token</button>
  12. </view>
  13.  
  14. <view class="btn-area">{{token}}</view>
  15. </form>

login.js:

  1. Page({
  2. formSubmit: function (e) {
  3. wx.request({
  4. url: 'https://www.msllws.top/login.php',
  5. data: {
  6. 'phone': e.detail.value.phone,
  7. 'password': e.detail.value.password
  8. },
  9. method: 'POST',
  10. header: {
  11. 'Content-Type': 'application/x-www-form-urlencoded'
  12. },
  13. success: function (res) {
  14. console.log(res.data);
  15. //以键值对的形式存储到本地缓存
  16. wx.setStorage({
  17. key: "token",
  18. data: res.data.data.token
  19. })
  20. },
  21. fail: function () { },
  22. complete: function () { }
  23. })
  24. },
  25.  
  26. gettoken: function (e) {
  27. var that = this
  28. wx.getStorage({
  29. key: 'token',
  30. success: function (res) {
  31. that.setData({'token': res.data})
  32. },
  33. fail: function () { },
  34. complete: function () { }
  35. })
  36. }
  37. })

实现缓存的存储和读取:

【从缓存中移除指定数据】wx.removeStorage

  1. wx.removeStorage({
  2. key: 'token',
  3. success (res) {
  4. console.log(res.data)
  5. }
  6. })

 【清除全部缓存数据】wx.clearStorage

  1. wx.clearStorage()
  2.  

希望本文所述对大家微信小程序开发有所帮助。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号