2-数据的存储-注册-登录-修改密码-CSDN博客

本文链接：https://blog.csdn.net/qq_33396183/article/details/131728278

文章目录

一返回到上一页

用BOM内置对象history来实现这个功能

/**
 * 返回到上一页
 */
function back(){
    let oimg = document.querySelector("header img")
    oimg.addEventListener("click",function(){
        history.back()
    })
}

二密码框显示密码

html

        <div>
            <div class="pwd">
                <label for="pwd">密码</label>
                <a href="./updatePassword.html">忘记密码?</a>
            </div>
            <input type="password" id="pwd">
            <span id="pwd-msg">密码不能为空</span>
            <img src="./images/eye.png" alt="">
        </div>

/**
 * 密码框显示密码
 */
function showPassword(){
    let oimg = document.querySelector("main >div:nth-child(2) >img")
    let oinput = document.querySelector("#pwd")
    oimg.addEventListener("click",function(){
        //如果图片是闭眼的状态，则修改图片为睁眼的状态，并修改input输入框type属性的值为text
        if(this.getAttribute("src")=="./images/eye.png"){
            this.setAttribute("src","./images/eye_open.png")
            oinput.setAttribute("type","text")
        }else{
            this.setAttribute("src","./images/eye.png")
            oinput.setAttribute("type","password")
        }
    })
}

三浏览器存储技术

浏览器提供了存储技术，可以让我们把数据临时或者永久的保存到浏览器上

localStorage 本地存储技术，可以把数据永久的保存到浏览器上

sessionStorage 会话存储技术，保存到浏览器上的数据只在一次会话的过程中有效

什么是会话：打开浏览器 —— 访问项目中的网页 ——关闭浏览器

浏览器存储技术存储的数据是键值对结构，而且键和值都必须是字符串

键具有唯一性

浏览器存储API

方法	说明
setItem(key,value)	保存数据
getItem(key)	获取数据
removeItem(key)	删除数据
clear()	清除所有的数据

本地存储

    <h1>本地存储</h1>
    <div class="local">
        <button>保存数据</button>
        <button>获取数据</button>
        <button>删除数据</button>
        <button>清空数据</button>
    </div>
    <script>
        let obtns = document.querySelectorAll(".local button")
        //保存数据
        obtns[0].onclick = function(){
            localStorage.setItem("username","admin")
        }
        //获取数据
        obtns[1].onclick = function(){
            let val = localStorage.getItem("username")
            console.log(val);
        }
        //删除数据
        obtns[2].onclick = function(){
            localStorage.removeItem("username")
        }
        //清空数据
        obtns[3].onclick = function(){
            localStorage.clear()
        }
    </script>

会话存储

    <h1>会话存储</h1>
    <div class="session">
        <button>保存数据</button>
        <button>获取数据</button>
        <button>删除数据</button>
        <button>清空数据</button>
    </div>
    <script>
        let obtnArr = document.querySelectorAll(".session button")
        //保存数据
        obtnArr[0].onclick = function(){
            sessionStorage.setItem("name","赵日天")
        }
        //获取数据
        obtnArr[1].onclick = function(){
            let val = sessionStorage.getItem("name")
            console.log(val);
        }
        //删除数据
        obtnArr[2].onclick = function(){
            sessionStorage.removeItem("name")
        }
        //清空数据
        obtnArr[3].onclick = function(){
            sessionStorage.clear()
        }
    </script>

四 JSON

JSON和JS对象的关系

JSON是JS对象的字符串表示法

let obj = {a:"hello",b:"world"} //这是js对象
let json = '{“a”:"hello","b":"world"}' //是字符串

JSON的作用

1.浏览器无法保存js对象，我们想让浏览器保存js对象这样的数据格式，我们可以把js对象转成json字符串再保存到浏览器
2.前后端交互的一种数据格式

JSON和JS对象的互转

1 JS对象转JSON字符串

语法: JSON.stringify(js对象)

let obj = {a:"hello",b:"world"} //这是js对象
console.log("js对象的数据类型",typeof obj,obj);
//js对象转json字符串
let str = JSON.stringify(obj)
console.log("JSON的数据类型",typeof str,str);

2 JSON字符串转JS对象

语法：JSON.parse(JSON字符串)

//json转js对象
let str = '{"a":"hello","b":"world"}'
let obj2 = JSON.parse(str)
console.log(obj2);

五注册

HTML

<!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>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="./css/register.min.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <img src="./images/back.png" alt="">
        <span>注册</span>
    </header>
    <!-- 主体 -->
    <main>
        <div>
            <label for="user">手机</label>
            <input type="text" id="user">
            <span id="username-msg">手机号不能为空</span>
        </div>
        <div>
            <label for="pwd">密码</label>
            <input type="password" id="pwd">
            <span class="pwd-msg">密码不能为空</span>
            <img src="./images/eye.png" alt="">
        </div>
        <div>
            <label for="rpwd">确认密码</label>
            <input type="password" id="rpwd">
            <span class="pwd-msg">密码不能为空</span>
            <img src="./images/eye.png" alt="">
        </div>
        <div>
            <button id="register" type="button">立即注册</button>
        </div>
    </main>

    <script src="./js/register.js"></script>
</body>
</html>

/**
 * 注册
 * {id,name,tel,password}
 */
function register(){
    let btn = document.querySelector("#register")
    btn.onclick = function(){
        //获取span标签
        let spArr = document.querySelectorAll("main span")
        //获取用户输入的信息
        let inputs = document.querySelectorAll("main input")
        let tel = inputs[0].value
        let password = inputs[1].value
        let repassword = inputs[2].value

        //校验账号，密码是否符合规则（6位 ，首字母大写，其余位可以是字母或数字）
        //校验手机号
        let reg1 = /^0?(13|14|15|17|18|19)[0-9]{9}$/
        console.log(reg1.test(tel));
        if(reg1.test(tel)){
            spArr[0].innerText=""
        }else{
            spArr[0].innerText="手机号格式错误"
            return
        }
        //校验密码
        let reg2 = /^[A-Z][A-Za-z0-9]{5}$/
        if(reg2.test(password)){
            spArr[1].innerText=""
        }else{
            spArr[1].innerText="长度为6位,首字母大写，其余位可以是字母或数字"
            return
        }
        //确认密码
        if(password == repassword){
            spArr[2].innerText=""
        }else{
            spArr[2].innerText="两次密码不一致"
            return
        }


        //1.读本地存储中的数据
        let userinfo_json = localStorage.getItem("userinfo")||"[]"
        //2.转JS对象
        let userinfo_arr = JSON.parse(userinfo_json)
        //3.判断账号是否存在
        let index = userinfo_arr.findIndex(e => e.tel == tel)
        if(index != -1){
            alert("账号已存在，注册失败")
            return
        }

        //实现账号id的自增长
        let arr = userinfo_arr.map(e=>e.id)
        arr.push(0)
        let newId = Math.max(...arr)+1

        //4.把输入的账号和密码保存到一个js对象中
        let u = {id:newId,name:"赵日天",tel,password}
        //5.把对象追加到数组的末尾
        userinfo_arr.push(u)
        //6.把数组转json
        let json = JSON.stringify(userinfo_arr)
        //7.把json字符串保存到本地存储
        localStorage.setItem("userinfo",json)
        alert("注册成功")
        //跳转到登录页面
        location = "../login.html"
    }
}

六重置密码

HTML

<!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>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="./css/update_password.min.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <img src="./images/bg1r.png" alt="">
        <div>
            <img src="./images/back.png" alt="">
            <span>修改密码</span>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <!-- 手机号 -->
        <div class="oldpwd">
            <span>手机号</span>
            <input type="text">
            <img src="./images/eye.png" alt="">
        </div>
        <!-- 新密码 -->
        <div class="pwd">
            <span>新密码</span>
            <input type="password">
            <img src="./images/eye.png" alt="">
        </div>
        <!-- 确认密码 -->
        <div class="confirm">
            <div>
                <span>确认密码</span>
            </div>
            <input type="password">
            <img src="./images/eye.png" alt="">
        </div>
        <button id="update">确认修改</button>
        
    </main>

    <script src="./js/updatePassword.js"></script>
</body>
</html>

/**
 * 忘记密码，重置密码
 */
function updatePassword(){
    //拿到按钮
    let obtn = document.querySelector("#update")
    obtn.onclick = function(){
        //获取用户输入的所有信息
        let inputs = document.querySelectorAll("main input")
        let tel = inputs[0].value
        let password = inputs[1].value
        let repassword = inputs[2].value
        
        //校验用户输入的信息是否符合规则

        //1.读本地存储中的数据
        let userinfo_json = localStorage.getItem("userinfo")||"[]"
        //2.转JS对象
        let userinfo_arr = JSON.parse(userinfo_json)
        //3.判断账号是否存在
        let index = userinfo_arr.findIndex(e => e.tel == tel)
        if(index == -1){
            alert("账号不存在")
            return
        }
        //4修改密码
        userinfo_arr[index].password = password
        //5.把数组转json
        let json = JSON.stringify(userinfo_arr)
        //6.把json字符串保存到本地存储
        localStorage.setItem("userinfo",json)

        alert("修改成功")
        location = "../login.html"

    }
}

七登录

HTML

<!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>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" href="./css/login.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <img src="./images/back.png" alt="">
        <span>登录</span>
    </header>
    <!-- 主体 -->
    <main>
        <div>
            <label for="user">手机</label>
            <input type="text" id="user">
            <span id="username-msg">手机号不能为空</span>
        </div>
        <div>
            <div class="pwd">
                <label for="pwd">密码</label>
                <a href="./updatePassword.html">忘记密码?</a>
            </div>
            <input type="password" id="pwd">
            <span id="pwd-msg">密码不能为空</span>
            <img src="./images/eye.png" alt="">
        </div>
        <div>
            <button id="login" type="button">立即登录</button>
        </div>
        <div>
            <a href="./register.html">立即注册</a>
        </div>
    </main>

    <script src="./js/login.js"></script>
</body>
</html>

/**
 * 登录
 */
function login(){
    //拿到登录按钮
    let obtn = document.querySelector("#login")
    obtn.onclick = function(){
        //1.获取用户输入的手机号和密码
        let inputs = document.querySelectorAll("main input")
        let tel = inputs[0].value
        let password = inputs[1].value
        //2.校验手机号和密码格式
        //获取span标签
        let spArr = document.querySelectorAll("main span")
        //校验手机号
        let reg1 = /^0?(13|14|15|17|18|19)[0-9]{9}$/
        if(reg1.test(tel)){
            spArr[0].innerText=""
        }else{
            spArr[0].innerText="手机号格式错误"
            return
        }
        //校验密码
        let reg2 = /^[A-Z][A-Za-z0-9]{5}$/
        if(reg2.test(password)){
            spArr[1].innerText=""
        }else{
            spArr[1].innerText="长度为6位,首字母大写，其余位可以是字母或数字"
            return
        }

        //3.读取本地存储中的用户信息,并转换为js对象
        //读本地存储中的数据
        let userinfo_json = localStorage.getItem("userinfo")||"[]"
        //转JS对象
        let userinfo_arr = JSON.parse(userinfo_json)

        //4以账号和密码为条件去数组中查找
        let userObj = userinfo_arr.find(e =>e.tel == tel && e.password == password)
        console.log(userObj);
        if(userObj){
            //5.把当前登录的用户对象保存到浏览器存储
            sessionStorage.setItem("loginUser",JSON.stringify(userObj))
            alert("登录成功")
            //6.跳转到首页
            location = "../my.html"
        }else{
            alert("账号或密码错误")
        }
    }
}