当前位置：网站首页>记住用户名案例（js）

记住用户名案例（js）

2022-08-03 11:03:00 【Cap07】 

<!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="username"> <input type="checkbox" name="" id="remember"> 记住用户名
    <script>
        var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        //先判断有没有输入用户名，如果输入，更新value值为用户名
        if (localStorage.getItem('username')) {
            username.value = localStorage.getItem('username');
            remember.checked = true;    //用于下次打开页面时，若用户名已记住，则此框默认勾选
        }
        //当框改变时，根据情况对localStorage进行相应改变
        remember.addEventListener('change', function() {
            if (this.checked) {
                localStorage.setItem('username', username.value)
            } else {
                localStorage.removeItem('username');
            }
        })
    </script>
</body>

效果：

 

原网站

版权声明
本文为[Cap07]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_51928176/article/details/126083910

边栏推荐

猜你喜欢

随机推荐