微信小程序-缓存-记住账号功能

const app = getApp();
const sm3 = require("../sm3/sm3");

Page({
  data: {
    username: '',
    password: '',
    rememberUsername: false, // 新增一个状态用于记住用户名
    queryParams: {},
  },

  // 页面加载时检查是否需要自动填充用户名
  onLoad: function (options) {
    // 获取本地缓存中的用户名
    const rememberUsername = wx.getStorageSync('rememberUsername');
    if (rememberUsername) {
      const rememberedUsername = wx.getStorageSync('username');
      if (rememberedUsername) {
        this.setData({
          username: rememberedUsername,
          rememberUsername: true // 修改记住用户名状态为已勾选
        });
      }
    }
  },

  // 处理记住账号复选框事件
  onChange: function (e) {
    const checked = e.detail.value.includes('1');
    this.setData({
      rememberUsername: checked
    });
  },

  // 提交表单时的处理，包括记住用户名的逻辑
  confirmSubmit: function () {
    // 如果勾选了记住用户名，则将用户名保存到本地缓存
    if (this.data.rememberUsername) {
      wx.setStorageSync('username', this.data.username);
      wx.setStorageSync('rememberUsername', true);
    } else {
      wx.removeStorageSync('username'); // 取消勾选时移除本地缓存中的用户名和记住状态
      wx.removeStorageSync('rememberUsername');
    }
  }
});

 使用 wx.setStorageSync 方法在用户点击记住账号选项时保存用户输入的用户名到本地缓存中，然后在页面加载时判断本地缓存中是否有保存的用户名，如果有则自动填充用户名输入框。

<view class="psdBox">
	<checkbox-group bindchange="onChange">
		<checkbox value="1"/>
			<label for="check" class="account" style="font-size: 14px;">记住账户</label>
	</checkbox-group>
</view>

添加了一个新的状态变量 rememberUsername 以及相应的处理函数 onLoad 和 onChange。在 onLoad 函数中会检查本地缓存中是否有保存的用户名，如果有，则自动填充到用户名输入框中。在 onChange 函数中处理记住账号复选框的状态变化。

.psdBox {
	margin: 28rpx 20rpx 28rpx 20rpx
}

checkbox .wx-checkbox-input {
	width: 28rpx;
	height: 28rpx;
}

checkbox .wx-checkbox-input {
	border-color: #409eff;
	background-color: transparent;
	transition: background-color .3s;
}

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	color: #fff;
	background-color: #409eff;
}

实现效果：