HTML5 本地存储,用localStorage做一个登录页面. |
您所在的位置：网站首页 › html中登录按钮代码怎么写 › HTML5 本地存储,用localStorage做一个登录页面. |
|
这里只使用localStorage实现一个登录,注册代码,用户注册,的用户名和密码,等信息,存储在浏览器本地存储中,其中,还包括了一点,html5离线缓存的代码. 下面值上代码: 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'); } } } } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |