JS实现记住用户密码

JS实现记住用户密码

有趣的小案例池子
JS实现定时器
JS实现关闭图片窗口
JS实现输入检验
获取焦点后隐藏提示内容的输入框
JS实现获取鼠标在画布中的位置
聊天信息框显示消息
JS点击切换背景图
自动切换背景的登录页面
JS制作跟随鼠标移动的图片
JS实现记住用户密码

概述

本文讲解如何使用JS实现我们常见的记住密码的功能。

效果展示

JS实现记住用户密码_第1张图片

构建HTML框架

<body>
    <input type="text" id="password"> <input type="checkbox" name="" id="remember"> 记住密码
    
body>

JS编写逻辑

<script>
        // 获取输入密码的元素
        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');
            }
        })
    </script>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="password"> <input type="checkbox" name="" id="remember"> 记住密码
    <script>
        // 获取输入密码的元素
        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');
            }
        })
    </script>
</body>

你可能感兴趣的:(JS学习之旅,javascript,前端,html)