微信小程序实现登录注册本地存储,给出完整代码示例
时间: 2023-08-05 17:45:41 浏览: 47
下面是一个简单的微信小程序示例代码,实现登录注册本地存储功能:
```javascript
// 注册页面
Page({
data: {
username: '',
password: ''
},
// 监听输入框输入事件
handleInput: function (e) {
const { name, value } = e.detail;
this.setData({
[name]: value
});
},
// 注册按钮点击事件
handleRegister: function () {
const { username, password } = this.data;
if (username && password) {
// 将用户名和密码存储到本地缓存中
wx.setStorageSync('username', username);
wx.setStorageSync('password', password);
wx.showToast({
title: '注册成功',
icon: 'success'
});
// 跳转到登录页面
wx.navigateTo({
url: '/pages/login/login',
})
} else {
wx.showToast({
title: '请输入用户名和密码',
icon: 'none'
});
}
}
});
// 登录页面
Page({
data: {
username: '',
password: ''
},
// 监听输入框输入事件
handleInput: function (e) {
const { name, value } = e.detail;
this.setData({
[name]: value
});
},
// 登录按钮点击事件
handleLogin: function () {
const { username, password } = this.data;
const storedUsername = wx.getStorageSync('username');
const storedPassword = wx.getStorageSync('password');
if (username === storedUsername && password === storedPassword) {
wx.showToast({
title: '登录成功',
icon: 'success'
});
// 跳转到首页
wx.switchTab({
url: '/pages/index/index',
})
} else {
wx.showToast({
title: '用户名或密码错误',
icon: 'none'
});
}
}
});
```
在这个示例代码中,我们创建了两个页面,一个是注册页面,一个是登录页面。在注册页面中,我们监听了两个输入框的输入事件,当用户输入完用户名和密码后,点击注册按钮,将用户名和密码存储到本地缓存中,并跳转到登录页面。在登录页面中,我们同样监听了两个输入框的输入事件,当用户输入完用户名和密码后,点击登录按钮,从本地缓存中获取存储的用户名和密码进行验证。如果验证通过,就跳转到首页。否则,提示用户名或密码错误。