localstorage实现登录注册跳转主页

最新推荐文章于 2023-07-10 17:31:47 发布

哈哈西西）

最新推荐文章于 2023-07-10 17:31:47 发布

阅读量2.3k

点赞数 5

文章标签： html html5

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/109378191

版权

实现效果

在这里插入图片描述

具体代码

js引用的本地代码，要使用需更改文件路径
登录页
html

<head>
        <meta charset="UTF-8">
        <title>登录页面</title>
    </head>

    <body>
        <div id="web">
            <div>
                <span style="color: blue">登录</span>
            </div>
    
            <div>
                <span>用户名：</span>
                <input id="loginName" type="text" placeholder="请输入用户名" />
            </div>
            <div>
                <span>密码：   </span>
                <input id="loginPsd" type="password" placeholder="请输入密码" />
            </div>
            <div>
                <button onclick="login()">登录</button>
            </div>
            <a href="register.html">注册</a>
        </div>
    </body>

 <script>
        /**
         * 登录的主方法
         */
        function login() {
            if(isNone()) {
                if(localStorage.user) {
                    // 从localStorage取出键为user的数据模型
                    arr = eval(localStorage.user);
                    let k = 0;
                    // 循环取出，可用其他方法代理，数据量多的情况下，不建议使用for循环
                    for(e in arr) {
                        // 判断用户名，密码是否和localStorage中的数据一致，兼容性写法必须添加trim(),不需要兼容可以不写
                        if($('#loginName').val().trim() == arr[e].loginName) {
                            if($('#loginPsd').val().trim() == arr[e].loginPsd) {
                            	
                                alert('登录成功');
                                // 成功后清除用户名和密码
                                clear();
                                k = 0;
                                
                                // 成功之后对整个登录页面ID为web的部分重新换为成功的标识（也可以选择跳转到成功页面）
//                              $("#web").html("<span style='color: blue;'>登录成功【success】</span>");
								//传参用户名
                                 window.location.href="index.html?"+arr[e].loginName;
                                 
                                return;
                            } else {
                                alert('密码错误');
                                // 失败后清除用户名和密码
                                clear();
                                k = 0;
                                return;
                            }
                        } else {
                            k = 1;
                        }
                    }
                    if(k == 1) {
                        alert('用户名不存在');
                        clear();
                    }
                } else {
                    alert('用户名不存在，正在跳转到注册页面！');
                    window.location.href="register.html";
                    clear();
                }
            }
        }

        /**
         * 清空数据
         * 等同于
         * document.getElementById("loginName").value="";
         * document.getElementById("loginPsd").value="";
         */
        function clear() {
            $('#loginName').val('');
            $("#loginPsd").val('');
        }

        /**
         * 登录的验证方法
         * 是否为空的判断
         */
        function isNone() {
            if($('#loginName').val().trim() == "") {
                alert('用户名不能为空');
                return false;
            } else if($('#loginPsd').val().trim() == "") {
                alert('密码不能为空');
                return false;
            }
            return true;
        }
    </script>

注册页
html

<head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>

    <body>
        <div id="web">
            <div>
                <span style="color: red;">注册</span>
            </div>
    
            <div>
                <span>用户名：   </span>
                <input id="loginName" type="text" placeholder="请输入用户名" />
            </div>
            <div>
                <span>密码：      </span>
                <input id="loginPsd" type="password" placeholder="请输入密码" />
            </div>
            <div>
                <span>确认密码：</span>
                <input id="loginPsd2" type="password" placeholder="请再次输入密码" />
            </div>
            <div>
                <button onclick="register()">注册</button>
            </div>
        </div>
    </body>

<script>
        /**
         * 注册的主方法
         */
        function register() {
            if(isNone()) {
                // 定义一个空数组
                let arr = [];
                if(localStorage.user) {
                    arr = eval(localStorage.user);
                    for(e in arr) {
                        // 取出数据判断是否注册过
                        if($('#loginName').val().trim() == arr[e].loginName) {
                            alert('该账号已被注册');
                            clear();
                            return;
                        }
                    }
                }
                const user = {
                    'loginName': $("#loginName").val(),
                    'loginPsd': $("#loginPsd").val()
                };
                // 添加数据
                arr.push(user);
                localStorage.user = JSON.stringify(arr);
                alert('注册成功');
                window.location.href="login.html";
                clear();
            }
        }
        
        /**
         * 清空数据
         * 等同于
         * document.getElementById("loginName").value="";
         * document.getElementById("loginPsd").value="";
         */
        function clear() {
            $('#loginName').val('');
            $("#loginPsd").val('');
            $("#loginPsd2").val('');
        }
        
        /**
         * 注册的验证方法
         * 是否为空的判断
         * 两次密码是否相等的判断
         */
        function isNone() {
            if($('#loginName').val().trim() == "") {
                alert('用户名不能为空');
                return false;
            } else if($('#loginPsd').val().trim() == "") {
                alert('密码不能为空');
                return false;
            } else if($('#loginPsd').val().trim() != $('#loginPsd2').val().trim()) {
                alert('两次密码不一致，请检查！');
                return false;
            }
            return true;
        }
    </script>

主页
html

<head>
		<meta charset="UTF-8">
		<title>首页</title>
	</head>

	<body>
		<h2 id="wellcome">欢迎你</h2>
			</body>

<script type="text/javascript">
			//	const name=localStorage.getItem('user')
			const name = JSON.parse(localStorage.getItem('user'))
			console.log(name)
			console.log(location.href)
			let address = location.href
			let index = address.indexOf('?')
			let str = address.substr(index + 1)
			//中文乱码要解码
			let str1 = decodeURIComponent(str);
			$('#wellcome').append(str1)
		</script>

登录注册功能实现总结

注册：先判断输入框是否输入为空，在进行两次密码输入校验，通过后进入注册的主方法，定义一个空数组用于存储用户对象，先从localStorage循环遍历值看是否已经注册，已注册跳出提示，未注册像向localStorage添加user对象，注册成功，最后清空输入框
登录：先判断为空，在从localStorage取值循环遍历判断密码正确，错误清空重新登录，没有用户名返回注册，正确携带用户名跳转到主页
主页：获得URL地址，字符串切割，就是操作dom节点显示用户名，中文乱码要解码。

localStorage总结

localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
localStorage的值类型限定为string类型，如需使用其他类型，要进行转型
转换为json对象，先循环将字符串转切割循环遍历为对象（键值对存储）

JSON.parse(jsonstr); //可以将json转换成对象
JSON.stringify(jsonobj); //可以将对象转换成json

localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
三种写入方式

var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.b=1;
            //写入c字段
            storage.setItem("c",3);

三种读取方式

          //第一种方法读取
            var a=storage.["a"];
            console.log(a);
            //第二种方法读取
            var b=storage["b"];
            console.log(b);
            //第三种方法读取
            var c=storage.getItem("c");
            console.log(c);

读取键

//循环遍历取出键值
var key=storage.key();

官方推荐的是getItem\setItem这两种方法对其进行存取
修改

              //写入b字段
            storage.b=1;
              //修改b字段
            storage.b=4;

删除
1.全部清除

var storage=window.localStorage;
storage.clear();

2 .部分清除

 storage.removeItem("b");

哈哈西西）

关注

5
点赞
踩
32

收藏

觉得还不错? 一键收藏
3
评论
localstorage实现登录注册跳转主页

实现效果具体代码js引用的本地代码，要使用需更改文件路径登录页html<head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <div id="web"> <div> <span style="c
复制链接

扫一扫