JavaScript实现记住用户名功能

shan33__

已于 2024-03-14 17:32:12 修改

阅读量650

点赞数 11

分类专栏：经典例题文章标签： javascript 前端 ecmascript 开发语言

于 2024-03-09 14:57:06 首次发布

本文链接：https://blog.csdn.net/shan33__/article/details/136583570

版权

经典例题专栏收录该内容

41 篇文章 1 订阅

订阅专栏

本文介绍了如何通过JavaScript利用localStorage在用户访问网页时自动填充上次输入的用户名，并在勾选复选框时保存，关闭页面后数据持久化。

摘要由CSDN通过智能技术生成

问题描述：通过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>

运行效果：