只用本地存储,微信小程序实现分角色登录注册,给出完整代码示例,注意格式
时间: 2023-08-05 10:45:41 浏览: 60
下面是一个微信小程序示例代码,实现分角色登录注册的本地存储功能:
```javascript
// 注册页面
Page({
data: {
username: '',
password: '',
role: 'user'
},
// 监听输入框输入事件
handleInput: function (e) {
const { name, value } = e.detail;
this.setData({
[name]: value
});
},
// 注册按钮点击事件
handleRegister: function () {
const { username, password, role } = this.data;
if (username && password) {
const users = wx.getStorageSync('users') || {};
if (users[username]) {
wx.showToast({
title: '用户名已存在',
icon: 'none'
});
} else {
// 将用户信息存储到本地缓存中
users[username] = {
password,
role
};
wx.setStorageSync('users', users);
wx.showToast({
title: '注册成功',
icon: 'success'
});
// 跳转到登录页面
wx.navigateTo({
url: '/pages/login/login',
})
}
} else {
wx.showToast({
title: '请输入用户名和密码',
icon: 'none'
});
}
}
});
// 登录页面
Page({
data: {
username: '',
password: '',
role: 'user'
},
// 监听输入框输入事件
handleInput: function (e) {
const { name, value } = e.detail;
this.setData({
[name]: value
});
},
// 登录按钮点击事件
handleLogin: function () {
const { username, password, role } = this.data;
const users = wx.getStorageSync('users') || {};
if (users[username] && users[username].password === password && users[username].role === role) {
wx.showToast({
title: '登录成功',
icon: 'success'
});
// 跳转到首页
wx.switchTab({
url: '/pages/index/index',
})
} else {
wx.showToast({
title: '用户名、密码或角色错误',
icon: 'none'
});
}
}
});
```
在这个示例代码中,我们同样创建了两个页面,一个是注册页面,一个是登录页面。在注册页面中,我们增加了一个角色输入框,并在注册按钮点击事件中,将用户输入的角色信息一同存储到本地缓存中。在登录页面中,我们同样增加了一个角色输入框,并在登录按钮点击事件中,从本地缓存中获取存储的用户信息进行验证。如果验证通过,就跳转到首页。否则,提示用户名、密码或角色错误。
需要注意的是,我们在本地缓存中使用了一个对象来存储所有用户的信息,对象的属性名为用户名,属性值为一个对象,包含密码和角色两个属性。如果要添加新的用户,可以直接通过属性名来添加,如果要修改用户的密码或角色,可以直接通过属性名来修改。