引言
在现代Web应用中,登录页面是用户与系统交互的第一道门槛。为了提升用户体验,”记住密码”功能几乎成了标配。它允许用户在下次访问时自动填充密码,从而简化登录过程。Vue3,作为前端领域的热门框架,凭借其Composition API提供的强大功能,使得实现这样的功能变得既简单又高效。本文将深入探讨如何利用Vue3的Composition API结合localStorage,实现一个优雅的登录页面记住密码功能。
技术栈
Vue3: 最新的Vue版本,带来了Composition API等新特性。
localStorage: Web存储API,用于在浏览器中持久化存储数据。
Composition API: Vue3的新特性,提供了更灵活的代码组织方式。
实现步骤
1. 项目 setup
首先,确保你已经创建了一个Vue3项目。如果没有,可以使用Vue CLI或Vite快速搭建:
vue create my-vue3-project
# 或者
npm init vite@latest my-vue3-project -- --template vue
2. 创建登录组件
在项目中创建一个名为Login.vue的组件:
import { ref, onMounted } from 'vue';
export default {
setup() {
const username = ref('');
const password = ref('');
const remember = ref(false);
// 从localStorage中读取保存的用户名和密码
onMounted(() => {
const savedUsername = localStorage.getItem('username');
const savedPassword = localStorage.getItem('password');
if (savedUsername && savedPassword) {
username.value = savedUsername;
password.value = savedPassword;
remember.value = true;
}
});
const handleLogin = () => {
if (remember.value) {
// 如果用户选择记住密码,保存到localStorage
localStorage.setItem('username', username.value);
localStorage.setItem('password', password.value);
} else {
// 如果用户取消记住密码,清除localStorage中的数据
localStorage.removeItem('username');
localStorage.removeItem('password');
}
// 这里可以添加登录逻辑
console.log('登录成功');
};
return {
username,
password,
remember,
handleLogin,
};
},
};
.login-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
代码解析
1. 模板部分
使用