用户勾选记住用户名（结合本地存储完成）

最新推荐文章于 2025-12-31 17:15:11 发布

原创最新推荐文章于 2025-12-31 17:15:11 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

本文介绍了一个简单的HTML页面示例，该页面利用JavaScript操作浏览器的LocalStorage来存储和读取用户的输入内容。当用户勾选‘记住用户名’选项时，输入框中的内容将被保存在浏览器的LocalStorage中；若取消勾选，则清除保存的信息。此功能适用于需要简单持久化存储需求的网页应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="uname"><input type="checkbox" name="" id="remember">勾选用户名
</body>
</html>
<script>
    var uname = document.getElementById('uname')       //输入框
    var remember = document.getElementById('remember')  //勾选框
    console.log(uname,remember);
    if(localStorage.getItem('uname')){    //  如果本地存储有uname  
            uname.value = localStorage.getItem('uname')   //就把uname  赋给输入框展示出来
            remember.checked = true         //并且让勾选框选中
    }
    remember.addEventListener('change',function(){      //监听勾选框是否改变
            if(this.checked){          //如果勾选框选中     
                localStorage.setItem('uname',uname.value)       //如果勾选框选中就把输入框的内容存到本地存储，名字叫uname
            }else {
                localStorage.removeItem('uname')        // 勾选框没有选中就把本地存储的uname 删除掉
            }
    })
</script>