【Javascript】进阶之localStorage在登录注册中的应用

描述

1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。

2. 注册的时候, 在缓存中有一个数组 ，存储当前创建的账户信息

3. 登录的时候,获取数组,验证对象是否在数组中存在

localStorage基本语法

		// localStorage: 缓存数据   json数据
        console.log(localStorage); 

        // 存储数据:  1. localStorage.属性名 = 值;  一次只能存储一个数据
        localStorage.name = '彭于晏';
        localStorage.age = 30;
        // 2. localStorage.setItem('属性名', '属性值');
        localStorage.height = 180;

        var obj = {
            'name': '张三',
            age: 88
        };
        // localStorage.obj = obj; // [object Object]

        // localStorage 存储的只能是字符串

        // 将js数据转成字符串  JSON.stringify
        var tt = JSON.stringify(obj);
        console.log(typeof tt);

        localStorage.object = tt;

        // 存储到本地的缓存 不会自动清除 也不会过期  
        // 只能手动清除
        localStorage.obj = '';
        // 移除本地缓存
        localStorage.removeItem('obj');

        // 清空本地缓存  清空所有数据
        localStorage.clear();  

        console.log(localStorage);

注册：在缓存中有一个数组 ，存储当前创建的账户信息

/* 
     Store user data into local storage
    */
    // Determine whether the user array exists in the current cache.
    // If there is no array, create an array to store the data source

    var registerForm = document.getElementById('registerform');
    var userArr = [];
    if (!localStorage.userArr) {
        // user not exist, create userArr in cache
        localStorage.userArr = JSON.stringify(userArr);
    } else {
        // user exists, save existed user information
        userArr = JSON.parse(localStorage.userArr);
    }
    // console.log(localStorage);
    // console.log(userArr);

    // Get register button
    // var registerButton = registerForm.register;
    // console.log(registerButton);


    registerForm.onsubmit = function(){
        // If all the verification passes, user info correct
        // console.log(flag);
        if(!flag) return false;
        // register user
        var username = registerForm.username.value;
        var password = registerForm.password.value;
        // console.log(username, password);

        // save data -- as array 
        var userInfo = {
            username: username,
            password: password
        }
        // console.log(userInfo.username);

        // judge whether the user has registered
        // Traverse array to find whether to register
        for(var i = 0; i < userArr.length; i++){
            // console.log(userArr[i]);
            if(userArr[i].username == userInfo.username){
                alert('用户已注册, 请直接登录! 如果忘记密码, 请修改密码!');
                window.location = './login.html';
                return false;
            }
        }
        // alert register succeed
        alert('注册成功, 去登录');
        // User has not been registered, register account
        userArr.push(userInfo);
        // console.log(userArr);

        // Save userInfo into cache
        localStorage.userArr = JSON.stringify(userArr);
        // console.log(localStorage);
        // jump to login page
        window.location = './login.html';
        // prevent submit event
        return false;
    }

登录,获取数组,验证对象是否在数组中存在

/*
        login localStorage
    */
    // When login, get userArr, verify if obj exists in userArr

    // get localStorage
    // console.log(localStorage.userArr);

    // transform into JS data
    var userArr = JSON.parse(localStorage.userArr);
    // console.log(userArr);

    // get form
    var loginForm = document.getElementById('loginform');
    // console.log(loginForm);

    // click login button, onsubmit event
    loginForm.onsubmit = function () {

        // get input value
        var username = loginForm.username.value;
        var password = loginForm.password.value;
        // console.log(username, password);

        var loginInfo = {
            'username': username,
            'password': password
        }

        // console.log(username);

        // Judge whether the user exists
        if (localStorage.userArr.indexOf(username) == -1) {
            // User does not exists
            alert('用户未注册, 请先注册');
            // Jump to the register page
            location.href = './register.html';
        } else {
            // User exists
            // if it is not exists, return -1, else return index
            if (localStorage.userArr.indexOf(JSON.stringify(loginInfo)) == -1) {
                alert('密码错误, 请重新输入');
            } else {
                // console.log('手机号和密码都正确 可以登录');
                // Save username, password, loginState in localStorage
                localStorage.username = username;
                localStorage.password = password;
                localStorage.loginState = true;

                // Jump to the index page
                window.location.href = '../index.html';
            }
        }

        // Judge whether loginInfo exists by tranversing userArr
        // Whether username and password match
        /* for(var i = 0; i < userArr.length; i++){
            if(userArr[i].username == username){
                // has registered
                if(userArr[i].password == password){
                    // can login
                    localStorage.username = username;
                    localStorage.password = password;
                    localStorage.loginState = true;

                    // Jump to the index page
                    window.location.href = '../index.html';
                    return false;
                }else{
                    // incorrect password
                    alert('用户密码错误, 请重新输入');
                    return false;
                }
            }
        }

        // not register
        alert('用户未注册,请先注册'); */

        // prevent submit
        return false;
    }

首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮

HTML部分:

<li id = "notlogin">
<!-- <a href="#" class="font">登录</a>&nbsp;&nbsp;&nbsp;
<a href="#" class="font">注册</a> -->
</li>

  <!-- footer -->
    <footer>
        <p>
            <a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span>
            <a href="#">加入我们</a><span> | </span><a href="#">品牌荣誉</a><span> | </span>
            <a href="#">版权申明</a><span> | </span><a href="#">网站地图</a><span> | </span>
            <a href="#">支付方式</a><br>
            <a href="#">京ICP备10218183-88</a>京ICP证161188号 <img src="./img/footer_1.png"></img>
            <a href="#">京公网安备110108020723号</a> <img src="./img/footer_2.png"></img><br>
            Copyright&copy;1999-2020 北京中公教育科技有限公司  All Rights Reserved 
        </p>
        <div class="verification">
            <a href="https://xinyong.yunaq.com/certificate?site=xue.ujiuye.com&at=realname"><img src="./img/footer_3.png" alt=""></a>&nbsp;
            <a href="https://xinyong.yunaq.com/certificate?site=xue.ujiuye.com"><img src="./img/footer_4.png" alt=""></a>
        </div>

        <div class="toparrow" id = "toparrow">
            <i class = "iconfont icon-ico_back"></i>
        </div>
    </footer>
    <script src="./js/template-web.js"></script>
        
    <script type = "text/html" id = "login">
        {{if loginState=='false'}}
            <a href="./html/login.html" class="font">登录</a>&nbsp;&nbsp;&nbsp;
            <a href="./html/register.html" class="font">注册</a>
        {{/if}}
        {{if loginState!='false'}}
            <a href="javascript:;" class="font">个人中心</a>&nbsp;&nbsp;&nbsp;
            <a href="javascript:;" class="font" id = "logout">退出</a>
        {{/if}}
    </script>
    <!-- link function.js -->
    <script src="./js/function.js"></script>
    <!-- dynamic events javascript -->
    <script src="./js/index.js"></script>

index.js部分

window.onload = function(){
    // Get local storage
    console.log(localStorage);


    if(!localStorage.username && !localStorage.password){
        console.log('未登录');
        // save local storage status
        localStorage.loginState = false;
    }else{
        console.log('已登录');
        localStorage.loginState = true;
    }
    // generate template
    var html = template('login', localStorage);

    // append father element
    var notLogin = document.getElementById('notlogin');
    notLogin.innerHTML = html;

    // click exit button
    if(localStorage.loginState == 'true'){
        // click exit button, log out
        var logout = document.getElementById('logout');
        // console.log(logout);
        // add click event
        logout.onclick = function(){
            // logout
            localStorage.username = '';
            localStorage.password = '';
            localStorage.loginState = false;
            // Refresh
            location.reload();
        }
    }
}