HTML5 本地存储,用localStorage做一个登录页面.

吴爃

已于 2022-11-04 12:06:56 修改

阅读量2.3k

点赞数 7

于 2021-11-06 15:23:33 首次发布

本文链接：https://blog.csdn.net/qq_59369367/article/details/121179680

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这里只使用localStorage实现一个登录,注册代码,用户注册,的用户名和密码,等信息,存储在浏览器本地存储中,其中,还包括了一点,html5离线缓存的代码.

下面值上代码:

html部分:

<!DOCTYPE html>
<!-- 功能:登录页面 ,实现用户的存储和登录;
-->


<html lang="en" manifest="clock.manifest">
<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>购物车登录页面</title>
   <link rel="stylesheet" href="login.css">
   <script type="text/javaScript" src="./login.js"></script>
   
   
</head>
<body>
    <div id="head">
        <div id="middle">
        <div id="ATM"> 
           <button onclick=" passlogin()"  value="">密码登录</button>
           <button onclick="registered()"  value="">免费注册</button>

        </div>
        <form id="form1">
            
            <input type="text" name="username" id="user1_name" placeholder="请输入您注册的用户名" value="" pattern="^[a-zA-Z]\w{2,7}" title="必须输入以字母开头,包含3个~8个字符或数字"/>
        
            <input type="password" name="passworld" id="pass1_name" placeholder="密码" value="" pattern="\d{6}" title="必须输入6个数字"/>
            <input type="button" id="button1" value="注册" onclick="enroll()" >
        </form>


        <form  id="form2">
            
            <input type="text" name="username" id="user" placeholder="请输入用户名" value="" pattern="^[a-zA-Z]\w{2,7}" title="必须输入以字母开头,包含3个~8个字符或数字"/>
        
            <input type="password" name="passworld" id="pass" placeholder="密码" value="" pattern="\d{6}" title="必须输入6个数字"/>
            <input type="button" id="button" value="登录" onclick="login()" >
        </form>
        <div style="text-align: right; " id="footer">
            <span><a >忘记密码</a></span>
            <span><a >忘记用户名</a></span>
            
        </div>
    </div>
    </div>
</body>
</html>

css部分:

*{
    margin: 0px;
    padding: 0px;

}
html,body{
    height: 100%;
    width: 100%;
    height: 100vh;	/* 重点一 */
    margin: 0 auto;
     background-image: url(./3.png);
     background-size:100% 100%;
  


    
}

#head{
    height: 100%; 
    /* 高度100%的实现,是依据父元素的高度大小进行实现的,所以这里给html,body设置
    了100%,此时,head高度100%才会有效果. */
    width: 100%;
    
  
    
}
#middle{
 background-color:white;
 width: 350px;
 height: 300px;
 position: relative;
top: 25%;
left: 60%;
}
#form2{
   
    margin-left: 30px;
    display: block;
    

}
#form1{
    margin-left: 30px;
    display: none;

}
form>p{
    font-size: 10px;
    text-align: left;
    margin: 0px;
    padding: 0px;
}
form>input{
border: 1px solid #ccc;
height: 42px;
outline: none;
font-size: 15px;
padding-left: 50px;   
width: 75%;


}
#ATM{
   height: 18px;
  padding-left: 30px;
   font-size: 16px;
   color: #3c3c3c;
   margin: 9px 10px 0 0;
   font-weight: 700;
   margin-bottom: 40px;
   padding-top: 29px;
}
#button{
    width: 90%;
    height: 40px;
    background-color: #ff0036;
    margin-top: 15px;
    border: 0px;
    padding: 0px;
    margin-top: 30px;
    border-radius: 8px;

}
#footer>span{
    color: #6c6c6c;
    
    font-size: 12px;
    margin-left: 10px;
    padding-right: 10px;
}
/* 
注册表单样式 */

#button1{
    width: 90%;
    height: 40px;
    background-color: #ff0036;
    margin-top: 15px;
    border: 0px;
    padding: 0px;
    margin-top: 30px;
    border-radius: 8px;

}
#ATM>button{
    background-color: #ffffff;
    border-radius: 7px;
    font-weight: 900;
    border: 0px;
    color: rgb(87, 85, 81);
    width: 70px;
    


}
#ATM>button:hover{
    background-color: #000000;
    color: wheat;
}

js部分:



 
    if(window.localStorage){
        alert("您的浏览器支持");
    }
    else{
        alert("您的浏览器不支持")
    } 
    //经过判断目前本机浏览器支持本地存储功能.

 

//判断当前用户是否在线,离线缓存文件的加载,需要是在服务器,不响应的情况下,对文件缓存测试/
 function online(){
    if(navigator.onLine){
        alert("在线");
    }else{
        alert(lixian);
    }

 }
 online();
 window.addEventListener('online',online,false);
window.addEventListener('offline',online,false);
//系统调用触发函数
//密码登录按钮函数
function passlogin() { 
    var cover1 = document.getElementById("form1");
    var discover =document.getElementById("form2");
        cover1.style.display="none";
        discover.style.display="block";
        //点击时,一个隐藏,一个显示
      
    }
        
        //注册按钮函数
function registered(){
    var cover1 = document.getElementById("form1");
    var discover =document.getElementById("form2");
    cover1.style.display="block";
  
    discover.style.display="none";
    
    }
   
  
//注册密码,用户名函数
function enroll(){
   
    var enroll_name = document.getElementById("user1_name");
    var enroll_pass = document.getElementById("pass1_name");
   var tel = enroll_name.value;
   console.log(tel);//获取用户名
   var pas = enroll_pass.value;
   console.log(pas);//获取密码
if(localStorage.length == 0){
    //没有数据直接存储
    var  dataLength = localStorage.length // 获取现在已有数据的长度  这个长度用于拼接到本地存储的每个key值中  达到一个动态存储的效果  每条本地存储数据需要一个钥匙   也就是获取这条数据的名称  就是key
	console.log(dataLength);
	// 创建一个对象用于存储用户输入的数据
    var data = {};//创建一个对象
    data.tel = tel;//添加用户名
    data.pas = pas;//添加密码
    data.id = dataLength;//添加凭证id
    var info = JSON.stringify(data);//将对象转化为字符串,因为本地只能存储字符串
    console.log(info);
   // 向本地存储数据   第一个参数就是key钥匙  第二个是我们要存储的数据
    localStorage.setItem("key"+dataLength,info);
   // 获取本地存储所有数据 查看是否存到本地
   

}
else{
    //判断用户名是否重复
    for(var i = 0; i < localStorage.length;i++){
        var key = localStorage.key(i);
        var keydate = localStorage.getItem(key);//得到当前key对应的对象
        var keyinfo = JSON.parse(keydate);//转化字符转
        
        if(keyinfo.tel == tel){ //判断你输入的用户名和已存储的是否重复
            alert("用户名已经存在");
            break;
        }
        else{
            var  dataLength = localStorage.length // 获取现在已有数据的长度  这个长度用于拼接到本地存储的每个key值中  达到一个动态存储的效果  每条本地存储数据需要一个钥匙   也就是获取这条数据的名称  就是key
           
            // 创建一个对象用于存储用户输入的数据
            var data = {};
            data.tel = tel;//添加用户名
            data.pas = pas;//添加密码
            data.id = dataLength;//添加凭证id
            var info = JSON.stringify(data);//将对象转化为字符串,因为本地只能存储字符串
            console.log(info);
           // 向本地存储数据   第一个参数就是key钥匙  第二个是我们要存储的数据
            localStorage.setItem("key"+dataLength,info);
           // 获取本地存储所有数据 查看是否存到本地
            console.log(localStorage.valueOf());
            alert("注册成功");
            setTimeout(function() {
                window.open('shop.html');
             }, 2000)//定时器注册成功后,直接进入主页
            break;
        }
        


    }


}

 
  
}

//登录函数
  function  login(){
    var username= document.getElementById("user").value;
    var password = document.getElementById("pass").value
    
    if(localStorage.length == 0){//判断当前本地存储是否为空值
        alert("你还没有注册");
    }
    else{
        //定义三个数组,实现本地的存储值临时存放,与输入的值进行比对作用
    var teldata = [];
    var passdata = [];
    var iddata = [];
    //循环判断本地用户名
    for( var i =0; i< localStorage.length; i++){
        var key = localStorage.key(i);
       
        var keydate = localStorage.getItem(key);//拿到当前key对应的value.
        var keyinfo = JSON.parse(keydate);//转换字符串
        console.log(keyinfo);//拿到了当前对象的三个值,
        teldata[i] = keyinfo.tel;//将对象的值,分别放入数组中,进行比较
        passdata [i] = keyinfo.pas;
        iddata[i] =keyinfo.id;
        console.log(teldata);
        console.log(passdata);
        console.log(iddata);

    }
    
    if(teldata.indexOf(username) < 0 ){ //当前数组中如果没有该用户名,返回-1,
        alert("该账号,尚未注册,请先注册");

    }else{
        var index = teldata.indexOf(username); //将当前得到的用户名在数组的中下标,拿出来,
        if(passdata[index] != password ){//将拿到的下标,赋给,密码数组的下标,因为此时,两个数组的下标是匹配的,所以可以通过下标进行密码的正确判断.
            alert("密码错误!");

        }else{
            alert("欢迎"+username+"光临");
            window.open('shop.html');

        }


    }



  }

  }