|
JS实现记住用户密码
有趣的小案例池子： JS实现定时器 JS实现关闭图片窗口 JS实现输入检验 获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置 聊天信息框显示消息 JS点击切换背景图 自动切换背景的登录页面 JS制作跟随鼠标移动的图片 JS实现记住用户密码
概述
本文讲解如何使用JS实现我们常见的记住密码的功能。
效果展示
构建HTML框架
记住密码
JS编写逻辑
// 获取输入密码的元素
var password = document.querySelector('#password');
// 获取技术密码的选择框的元素
var remember = document.querySelector('#remember');
// 在本地的存储单元中存储密码 如果本地存储获取 password这个元素为真
if (localStorage.getItem('password')) {
// 那么把password的value设置为本地存储的password
password.value = localStorage.getItem('password');
// 然后设置已经记住密码了
remember.checked = true;
}
// 给remember输入框添加事件
remember.addEventListener('change', function() {
// 如果已经记住密码了
if (this.checked) {
// 那么本地存储现在password中的值 把输入的password存放到本地存储中
localStorage.setItem('password', password.value)
} else {
// 如果没有记住密码 那么移除本地的password的存储情况
localStorage.removeItem('password');
}
})
完整代码
Document
记住密码
// 获取输入密码的元素
var password = document.querySelector('#password');
// 获取技术密码的选择框的元素
var remember = document.querySelector('#remember');
// 在本地的存储单元中存储密码 如果本地存储获取 password这个元素为真
if (localStorage.getItem('password')) {
// 那么把password的value设置为本地存储的password
password.value = localStorage.getItem('password');
// 然后设置已经记住密码了
remember.checked = true;
}
// 给remember输入框添加事件
remember.addEventListener('change', function() {
// 如果已经记住密码了
if (this.checked) {
// 那么本地存储现在password中的值 把输入的password存放到本地存储中
localStorage.setItem('password', password.value)
} else {
// 如果没有记住密码 那么移除本地的password的存储情况
localStorage.removeItem('password');
}
})
|