localStorage()存储登录用户名

最新推荐文章于 2024-05-29 11:23:25 发布

ヽ错落不堪的年华。

最新推荐文章于 2024-05-29 11:23:25 发布

阅读量2.3k

点赞数 2

分类专栏：技术交流前端技术总结文章标签：存储 localStotrge 登录前端小功能

本文链接：https://blog.csdn.net/qq_44777678/article/details/91898338

版权

技术交流同时被 3 个专栏收录

107 篇文章 2 订阅

订阅专栏

技术总结

103 篇文章 0 订阅

订阅专栏

前端

97 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            border: 1px solid #ccc;
            margin:0 auto;
            padding-left:80px;
            padding-top:30px;
        }
        label{
            height: 30px;
            line-height:30px;
        }
        input[type="submit"]{
            width:230px;
            height: 30px;
            line-height:30px;
            text-align: center;
            margin-top:10px;
        }
    </style>

</head>
<body>
<div>
    <label for="userName">昵称：</label>
    <input type="text" name="userName" id="userName"> <br>
    <label for="userPwd">密码：</label>
    <input type="password" name="userPwd" id="userPwd"> <br>
    <label for="isRemenber">是否记住用户名:</label>
    <input type="checkbox" id="isRemenber"><br>
    <input type="submit" value="提交" id="submit">
</div>
<script>
    window.onload=function(){

        /*页面打开，判断是否存储过用户名---*/
        var uName=window.localStorage.getItem('userName');

				// 判断本地存储内是否有值
        if(uName != null){
					// 把本地存储的用户名渲染到页面
          document.getElementById('userName').value=uName;
					// 密码框获得焦点
          document.getElementById('userPwd').focus();
        }
        else{
					// 本地不存在用户名, 用户名框聚焦
          document.getElementById('userName').focus();
        }

        /*点击登录时存储数据*/
        document.getElementById("submit").onclick=function(){
		  // 获取用户名框内的数据
          var name=document.getElementById('userName').value;
          
		  // 获取当前是否记住用户名状态
		  var isRemenber=document.getElementById('isRemenber');

		  /*判断用户是否选择记住用户名*/
          if(isRemenber.checked==true){
              /*存储数据到localstorage*/
              window.localStorage.setItem('userName',name);
          }else{
			  // 清楚本地存储的用户名
              window.localStorage.removeItem('userName');
          }
        }
    }
</script>
</body>
</html>

ヽ错落不堪的年华。

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
localStorage()存储登录用户名

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; hei...
复制链接

扫一扫