JavaScript本地取值删值1【基础】

页面一
html

<div class="box">
        <div class="boxContent">
            <div class="box1 ">
                <div class="left"><span class="line" data-id=0>账户登录</span></div>
                <div class="right" ><span data-id=1>二维码登录</span></div>
            </div>
            <div class="left change1" >
                <div class="box2">
                    <div class="box2Top"><a href="javascript:;">手机验证登录</a></div>
                    <div class="box2Content">
                        <!-- 1 -->
                        <form action="./22综合案例.html" class="info">
                            <div class="top">
                                <i class="iconfont icon-yonghu"></i>
                                <input type="text" class="inp uname" placeholder="请输入用户名称/手机号码">
                            </div>
                            <div class="top1">
                                <i class="iconfont icon-jiesuo"></i>
                                <input type="password"  class="inp pwd" placeholder="请输入密码">
                            </div>
                            <div class="top2">
                                <input type="checkbox" class="che">
                                <span>我已同意<a href="javscript:;">《服务条款》</a> 和 <a href="javscript:;">《服务条款》</a></span>
                            </div>
                            <button class="btn">登录</button>
                            <!-- 2 -->
                        </form>
                    </div>
                </div>
                <div class="box3">
                    <div><a href="javascript:;">忘记密码？</a></div>
                    <div><a href="./20综合案例.html">免费注册</a></div>
                </div>
            </div>
            <div class="right12 change1" >
                <div class="rright">
                    <img src="../DOM/image/img11.jpg" alt="实际二维码">
                    <p>请用App扫码登陆</p>
                </div>
            </div>
        </div>

js

<script>
        const boxContent = document.querySelector('.boxContent')
        const change1 = document.querySelectorAll('.change1')
        boxContent.addEventListener('click',function(e) {
            if (e.target.tagName === 'SPAN') {
                this.querySelector('.box1 .line').classList.remove('line')
                e.target.classList.add('line')
                for (let index = 0; index < change1.length; index++) {
                    change1[index].style.display = 'none'
                }
                change1[e.target.dataset.id].style.display = 'block'
            }
        })
        
        const uname = document.querySelector('.uname')
        uname.addEventListener('change',getReg1)
        function getReg1() {
            return /^[0-9a-zA-Z]{2,3}$/.test(uname.value) ? true : false
        }
        
        const pwd = document.querySelector('.pwd')
        pwd.addEventListener('change',getReg2)
        function getReg2() {
            return /^[1-9]{2,3}$/.test(pwd.value) ? true : false
        }
        
        const che = document.querySelector('.che')
        che.addEventListener('click',function() {
            console.log(this.checked);
        })

        const info = document.querySelector('.info')
        info.addEventListener('submit',function(e) {
            if (!che.checked) {
                alert('请勾选条款')
                e.preventDefault()
            } else if(!getReg1() || !getReg2()) {
                alert('内容不完整')
                e.preventDefault()
            } else {
                const obj = [{
                    uname: uname.value,
                    pwd: pwd.value
                }]
                localStorage.setItem('obj',JSON.stringify(obj))
                // location.href = './22综合案例.html'
            }
            
        })
    </script>

页面二
html

<form action="" class="info">
        <!-- 1.用户名 -->
        <div class="box2">
            <div>
                <input type="text" placeholder="用户名" class="inputAll input2">
            </div>
            <span class="span2"></span>
        </div>
        <!-- 手机号 -->
        <div class="box2">
            <div>
                <input type="text" placeholder="手机号" class="inputAll input3">
            </div>
            <span class="span3"></span>
        </div>
        <!-- 验证码 -->
        <div class="box1">
            <div>
                <input type="text" placeholder="短信验证码" class="input1 inputAll input11">
            </div>
            <div class="rev">获取验证码</div>
        </div>
        <span class="span1"></span>
        <!-- 密码 -->
        <div class="box2">
            <div>
                <input type="password" placeholder="密码" class="inputAll input4">
            </div>
            <span class="span4"></span>
        </div>
        <!-- 再次输入密码 -->
        <div class="box2">
            <div>
                <input type="password" placeholder="密码" class="inputAll input5">
            </div>
            <span class="span5"></span>
        </div>
        <!-- 复选框 -->
        <div class="box3">
            <!-- <input type="checkbox" class="input6"> -->
            <i class="iconfont icon-gouxuan"></i>
            <span class="span6">已阅读同意<a href="javascript:;">《用户服务协议》</a></span>
        </div>
        <button>提交</button>
    </form>

js

// 用户名
        const input2 = document.querySelector('.input2')
        const span2 = document.querySelector('.span2')
        input2.addEventListener('change',getReg1)
        function getReg1() {
            const reg = /^[0-9A-Za-z-_]{2,4}$/
            if (!reg.test(input2.value)) {
                span2.innerHTML = '输入不合法,请输入2-4位'
                return false
            }
            span2.innerHTML = ''
            return true
        }
        
        // 手机号
        const input3 = document.querySelector('.input3')
        const span3 = document.querySelector('.span3')
        input3.addEventListener('change',getReg2)
        function getReg2() {
            const reg = /^1[0-9]{10}$/
            if (!reg.test(input3.value)) {
                span3.innerHTML = '输入不合法,请输入11位'
                return false
            }
            span3.innerHTML = ''
            return true
        }
        
        const input1 = document.querySelector('.input1')
        const span1 = document.querySelector('.span1')
        input1.addEventListener('change',getReg3)
        function getReg3() {
            const reg = /^[0-9]{4}$/
            if (!reg.test(input1.value)) {
                span1.innerHTML = '输入不合法,请输入4位'
                return false
            }
            span1.innerHTML = ''
            return true
        }
        // 验证码
        const rev = document.querySelector('.rev')
        let flag = true
        rev.addEventListener('click',function() {
            if (flag) {
                flag = false
                let i = 5;
                rev.innerHTML = `0${i}秒后重新获取`
                let timer = setInterval(function(){
                    i--
                    // console.log(i);
                    rev.innerHTML = `0${i}秒后重新获取`
                    if (i === 0) {
                        clearInterval(timer)
                        rev.innerHTML = `重新获取`
                        flag = true
                    }
                },1000)
           }
        })
        
        // 密码
        const input4 = document.querySelector('.input4')
        const span4 = document.querySelector('.span4')
        input4.addEventListener('change',getReg4)
        function getReg4() {
            const reg = /^[0-9a-zA-Z-_]{6,10}$/
            if (!reg.test(input4.value)) {
                span4.innerHTML = '输入不合法,请输入6-10位'
                return false
            }
            span4.innerHTML = ''
            return true
        }
        
        // 再次输入密码
        const input5 = document.querySelector('.input5')
        const span5 = document.querySelector('.span5')
        input5.addEventListener('change',getReg5)
        function getReg5() {
            if (input5.value !== input4.value) {
                span5.innerHTML = '信息不一致'
                return false
            }
            span5.innerHTML = ''
            return true
        }
    
        // 复选框 ???
        const input6 = document.querySelector('.icon-gouxuan')
        input6.addEventListener('click',function() {
            // console.log(input6.checked);
            this.classList.toggle('icon1')
        })
        // 提交
        const info = document.querySelector('.info')
        info.addEventListener('submit',function(e) {
           if(!input6.classList.contains('icon1')) {
                alert("请勾选同意")
                e.preventDefault()
            } else if (!getReg1() || !getReg2() || !getReg3() || !getReg4() || !getReg5()) {
                alert("输入有误")
                e.preventDefault()
            }
        })
    </script>

页面三
html

 <div>
        <p class="left"></p>
        <p class="right"></p>
    </div>

js

<script>
        let arr = JSON.parse(localStorage.getItem('obj'))
        const left = document.querySelector('.left')
        const right = document.querySelector('.right')
        if (arr) {
            const str =arr.map(function(ele,index) {
                // console.log(ele.uname);
                return ele.uname
            })
            // console.log(str); //数组
            const str1 = str.join('')
            // console.log(str1); //string
            
            left.innerHTML = `Hello ${str1}`
            right.innerHTML = `<a href="JavaScript:;">退出登录</a>`
            right.addEventListener('click',function() {
                localStorage.removeItem('obj')
                grtRender()
            })
        } else {
            grtRender()
        }
        
        function grtRender() {
            left.innerHTML = `<a href="./21综合案例.html">请先登录</a>`
            right.innerHTML = `<a href="./20综合案例.html">免费注册</a>`
        }
    </script>