HTML本地实现注册登录储存数据页面

于 2024-06-18 15:21:18 发布
阅读量308 收藏
点赞数 3
分类专栏： HTML 黄献新 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WUXIANJINBU/article/details/139774263
版权

新手第一次发CSDN，请多关照

#使用 localStorage 实现一个登录,注册代码,用户注册,的用户名和密码,等信息,存储在浏览器本地存储中

项目展示

注册页面登录页面

html代码展示

<!DOCTYPE html>
<!-- 实现用户的存储和登录;
-->
 
 
<html lang="ch" 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;
      letter-spacing: 1.1px;

    }

    body {
      height: 100%;
      width: 100%;
      height: 100vh;
      /* 重点一 */
      margin: 0 auto;
      background-image: url(./img/未来科技数据3D粒子背景.png);
      background-size: 100% 100%;
      background-color: #000000;
    }

    #head {
      height: 100%;
      /* 高度100%的实现,是依据父元素的高度大小进行实现的,所以这里给html,body设置
    了100%,此时,head高度100%才会有效果. */
      width: 100%;



    }

    #middle {
      background-color: white;
      width: 350px;
      height: 300px;
      position: relative;
      top: 25%;
      left: 40%;
      border-radius: 8px;
    }

    #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 {
      color: #ffffff;
      border: 1px solid #ccc;
      height: 42px;
      outline: none;
      font-size: 13px;
      padding-left: 30px;
      width: 80%;
      margin-top: 10px;
      border-radius: 58px;


    }

    #ATM {
      height: 18px;
      padding-left: 30px;
      font-size: 16px;
      color: #3c3c3c;
      font-weight: 700;
      margin-bottom: 20px;
      padding-top: 20px;
    }

    #button {
      width: 90%;
      height: 40px;
      background-color: rgb(0, 209, 209);
      margin-top: 15px;
      border: 0px;
      padding: 0px;
      margin-top: 20px;
      border-radius: 58px;

    }

    #footer>span {
      color: #6c6c6c;

      font-size: 12px;
      margin-left: 10px;
      padding-right: 10px;
    }

    /* 
注册表单样式 */

    #button1 {
      width: 90%;
      height: 40px;
      background-color: rgb(0, 209, 209);
      margin-top: 15px;
      border: 0px;
      padding: 0px;
      margin-top: 20px;
      border-radius: 58px;

    }

    #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: rgb(0, 209, 209);
      color: rgb(255, 255, 255);
    }

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');
 
        }
 
 
    }
 
 
 
  }
 
  }

效果展示

黄献新
关注
专栏目录
Ajax(超级重点)
张子又
02-25 868
4.Ajax(超级重点) AJax就是局部刷新技术，在和服务器之间交互时，不用刷新整个页面，只是更新页面的一部分。 一个Ajax应用程序包含以下几种技术： 1).服务器端技术,比如Servlet需要在服务器端处理请求，发送响应给浏览器 2).javascript: 通过js事件来发送异步请求，即在事件的响应函数中发送ajax异步请求，将服务器端返回的响应数据绑定到DOM元素中进行显示 3).DOM...
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
10-15
在本文中，我们将深入探讨如何...总结，JS+HTML5本地存储Localstorage在实现注册登录功能时，可以简化前端与服务器的交互，提高用户体验。通过合理的数据管理和验证逻辑，我们可以创建一个高效且安全的用户管理系统。
js本地存储实现登录注册
最新发布
2301_79431208的博客
08-22 557
与用本地存储去实现登录注册的链接。仅供参考，如有异议，请及时提问！
学习Ajax后的所有重点
03-29
Ajax的分页，dwr的分页，增删改查，省市的三级联动，json，等等
Ajax重点整理
aaa_Gyt的博客
11-27 376
Ajax工作流程 Ajax:在不刷新页面的情况下向服务器请求数据 1.创建XMLHttpRequest对象(俗称小黄人) var xhr = new XMLHttpRequest(); XMLHttpRequest ： http请求对象，负责实现ajax技术 2.设置请求 xhr.open('get', 'url'); url:服务器地址 3.发送请求 xhr.send(); 4.注册回调函...
AJAX(重点)
qq_38135680的博客
06-26 158
一、概述 * AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 * 可以向服务器发送`异步请求`，实现在不重新加载整个网页情况下，`更新网页局部的内容`，从而提高用户的体验。 同步：客户端发送请求后，必须等待服务端的响应。在等待的期间客户端不能做其他操作。 异步：客户端发送请求后，不需要等待服务器的响应。在服务器处理的过程中，客户端可以进行其他操作。 ​ * 应用场景 搜索框提示 表单数据验证
Ajax重点总结
Mu木
02-23 299
Ajax—Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页。 什么是Ajax? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
HTML5交互式登录注册页面html模板
12-04
这些特性使得网页结构更加清晰，同时也提高了数据的本地存储能力，使登录注册页面在离线状态下也能保持一定程度的功能。 在CSS方面，这个模板可能包含了用于样式控制的外部样式表文件。CSS允许开发者对页面布局、...
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
09-20
在本文中，我们将详细探讨如何使用Python3语言结合urllib模块来爬取指定的百度贴吧页面，并将爬取到的页面数据保存生成为本地文档的方法。 首先，需要了解的是Python是一种广泛用于网络爬虫开发的编程语言，其简单...
AJAX重点
LightSeal的博客
05-31 72
解决的问题 在不刷新网页的情况下取更新数据 核心 if(window.ActiveXObject){ ajax=new ActiveXObject("Microsoft.XMLHTTP"); }else if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); } 用法 创建 Var ajax=new XMLHttpRequest(); 打开 同步 ajax.open("get","xxx.php",false); //服务器地址 //
Ajax常见知识点
huicooling的博客
05-02 714
一、Ajax概述    1、异步？同步         同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态。        异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死。    2、Ajax运行原理              页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服...
AJAX知识点大全 最全笔记 知识点合集
liuzizhoufaith的博客
04-20 1553
第一章 绪论 第一讲.AJAX简介 不刷新的情况下向服务端发送请求,获得响应 AJAX全称是Asynchronous JavaScript And XML 异步的JS和XML 通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势是无刷新获取数据 AJAX不是新的编程语言,而是一种将现有标准组合在一起使用的新方式 如: 百度在搜索内容时,会出现关键词的相关词提醒,就是用的AJAX 当注册网站时输入用户名,如果用户名用过了,会提示用户名不可用,也是AJAX 网站的二级菜单,一般都是鼠标放上去了
[自学笔记]AJAX一些容易被人忽略的重点
晓郎编程
10-23 869
    用AJAX开发的时间也有一段日子了，但是“走都没走好，就直接开始跑了”。因为之前在学的AJAX的时间并不多，基本上都是略过，挑一下重点来讲。然后直接学习了了DWR这个简单、强大、好使的框架。所以很多AJAX的基本都忽略了。最近重新学了一下，记下一些关键点。忽略了这些，往往可能会让你的AJAX程序得到一些意料之外的结果。1、初始化连接 request.open(Param1,Para
ajax的知识点
weixin_40214184的博客
12-17 179
1、什么是同步？什么是异步？    同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态；    异步：客户端发送请求到服务器端，无论服务器是否放回响应，客户端都可以随意做其他事情，不会被卡死。 2、Ajax的运行原理     页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行操作，直到服务器...
关于ajax的知识点
小婷子最美的博客
01-18 507
关于ajax的知识点一、Ajax发展历史 1、历史起源1998年 微软公司 IE5 XMLHTTP（技术）2005年 谷歌 Gmail（邮箱）、谷歌地图 XMLHttpRequest （风靡一时）2、什么是Ajax1) Asynchronous ：异步2) JavaScript ：JS3) And ：和4) XML ：XML 所谓的Ajax就是基于Javascript+XML的异步请求 3、Aja
AJAX的知识点详细总结
ZS74520的博客
09-22 1116
AJAX相关知识要点 一、原生AJAX 1.1 AJAX简介 AJAX全称为Asynchronous JavaScript And XML，就是异步的JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。 1.2 XML简介 XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。例如： 比如说有一个学生数据 name="张三";age="14";sex=
ajax基础知识点
小冷在努力~
05-29 1019
ajax可以看成是javascript创建的对象。在某一个事件触发时，该对象会提交到服务器进行处理，和产生相应的返回。 基本模板如下。 $.ajax({//可以看成是一个数据对象，对应javascript的对象。 url:"/jquery/ajaxServlet",//请求服务器的url data:{method:ajax,val:value},//参数value提交到服务器上的函
AJAX知识点总结
qq_41040989的博客
01-30 98
AJAX总结
用HTML在页面中使用本地存储实现登录注册效果
04-18
很高兴能为您解答问题。对于您的问题，我可以给出以下的回答： 使用本地存储实现登录注册效果的一般步骤如下： 1. 在HTML页面中添加登录和注册表单，用户输入信息后，将表单数据存储到本地存储中。 2. 当用户访问页面时，检查是否已经存在登录状态，如果存在，则跳过登录页面直接进入主页面。 3. 如果用户还没有登录，则在页面中显示登录表单。 4. 当用户输入账号和密码后，检查账号和密码是否正确，如果正确，则将登录状态存储到本地存储中。 5. 这样，下一次用户访问页面时，就能自动登录了。在注册时也可以类似地使用本地存储来保存用户信息。 需要注意的是，使用本地存储存在一定的安全风险，因为本地存储是保存在用户的浏览器中的，所以用户可以轻易地修改存储的数据。对于一些安全性较高的应用程序，建议使用服务器端的存储方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值