从api接口获取信息缓存到本地（微信小程序）

最新推荐文章于 2025-06-30 11:32:21 发布

原创最新推荐文章于 2025-06-30 11:32:21 发布 · 7k 阅读

6 ·

CC 4.0 BY-SA版权

本文介绍了一种在微信小程序中实现用户登录信息缓存的方法，通过使用wx.setStorage API将登录后的用户信息保存到本地存储中，以便后续操作时直接读取而无需重复请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我们登录以后获取的信息，有些信息在后面的一些操作也会用到这些信息，我们不可能每次都重新获取，所以这时候我们就需要将这些信息缓存到本地。

比如下面这个样

登录成功后我们可以在Sorage查看缓存的信息注意：同一个微信用户，同一个小程序 storage 上限为 10MB。

接下来我们来看下d代码

这是登录页的代码，注意html代码写在 .wxml文件里，css代码写在 .wxss文件中，js代码写在 .js文件中。

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="box">
  <view class="header">学生登录</view>
    <view class="no">学号：</view>
    <view class="input_no">
       <input type="number" name="no" placeholder="请输入学号" value="1635050110" auto-focus/>
     </view>
  
    <view class="pwd">密码：</view>
    <view class="input_pwd">
      <input password name="pwd" placeholder="请输入密码" value="123456" type="text" />
    </view>

  <view class="btn">
    <button class='btn1' type="primary" formType="submit"> 登录 </button>
    <button class='btn2' type="warn" formType="reset"> 重置 </button>
  </view>

  </view>
</form>

下面是JS代码

formSubmit: function (e) {  //给formSubmit定义函数事件
    // console.log(e.detail.value)
    wx.request({
      url: "", //仅为示例，并非真实的接口地址  url写api接口
      data: {
        username: e.detail.value.no,    //获取前台输入的值
        password: e.detail.value.pwd    //获取前台输入的值
      },
      header: {
        'content-type': 'application/json' // 默认值  可不写
      },
      success: function (res) {
        console.log(res.data);
        wx.setStorage({    //setStorage 存储到Storage缓存中
          key: 'student',   //本地缓存中指定的key
          data: res.data
        });
      }
    })
  }

这样我们就可以在Storage中查看缓存的信息了