JavaScript实现记住用户名功能

简介: JavaScript实现记住用户名功能

问题描述:通过JavaScript实现点击复选框将用户名存储到本地中,再次打开页面,输入框中自动输入上次保存的数据。

<body>
 
    <label for="">用户名</label> <input type="text1" name="" id="user" placeholder="请输入用户名">
    <input type="checkbox" name="" id="cbx">记住用户名
    <script>
        var cbx = document.querySelector('#cbx');
        var user = document.querySelector('#user');
        if (localStorage.getItem('user') != '') {
            var a = localStorage.getItem('user')
            user.value = a;
            cbx.checked = true;
        }
        //    通过本地存储将数据永久存储(操作复选框,进行勾选)
        // 当发生改变的的时候
        cbx.onchange = function () {
            if (this.checked && user.value != '') {
 
                localStorage.setItem('user', user.value);
 
 
            } else {
                // 当checked值为false时,将数据清除
                localStorage.removeItem('user');
                user.value = ''
            }
        }
        // 再次打开页面。判断本地是否有用户名,有的话自动填入输入框,并将按钮勾选
        if (localStorage.getItem('user')) {
            user.value = localStorage.getItem('user');
            cbx.checked = true;
        } else {
 
            user.value = '';
            cbx.checked = false;
 
        }
    </script>
</body>

运行效果:

相关文章
|
1天前
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
|
1天前
|
JavaScript Serverless
JS实现递归功能
JS实现递归功能
|
1天前
|
JavaScript
JS实现分页功能
JS实现分页功能
|
9天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
8 0
|
10天前
|
JavaScript 前端开发
|
10天前
|
JavaScript Shell
Vue.js功能实现博客
Vue.js功能实现博客
|
18天前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
1月前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
25 3
|
1月前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
20 1
|
1月前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
14 0