美文网首页
localstorage实现缓存用户名,有时间限制

localstorage实现缓存用户名,有时间限制

作者: zsyyyyy | 来源:发表于2019-06-07 22:08 被阅读0次
    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
    
        <body>
            <div class="web">
                <ul class="login">
                    <li>
                        <span>用户名:</span>
                        <input type="text" />
                    </li>
                    <li>
                        <span>密码:</span>
                        <input type="password" />
                    </li>
                    <li>
                        <label>
                                <input type="checkbox" class="remember" />
                                <span class="rPw">记住密码</span>
                        </label>
                        <button class="loginBtn">登录</button>
                    </li>
                </ul>
            </div>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                let loginBtn = $(".loginBtn");
                let ipt = $(".login input");
                loginBtn.on("click", () => {
                         //prop设置或者获取选中对象的属性
                                 //原生获取属性 .getAttribute("属性")
                    if($(".remember").prop("checked")) {
                        var curTime = new Date().getTime();
                        localStorage.setItem("user", JSON.stringify({
                            user: ipt[0].value,
                            time: curTime
                        }));
                    }
                })
                //转为对象
                var obj = JSON.parse(localStorage.getItem("user"));
                console.log(obj)
                if(typeof obj != "undefined"){      
                    if(obj != null){                    
                        ipt[0].value = obj.user;
                        //封装到时间清除用户名
                        function cleartime(exp) {
                            var curTime2 = new Date().getTime(); //加载当前时间
                            if(curTime2 - obj.time > exp) {
                                localStorage.clear();//超时就清除掉
                            } else {
                                ipt[0].value = obj.user;
                            }
                        }
                        window.onload = () => {
                            cleartime(100000);
                        }
                    }
                }
                
            </script>
        </body>
    </html>
    

    相关文章

      网友评论

          本文标题:localstorage实现缓存用户名,有时间限制

          本文链接:https://www.haomeiwen.com/subject/ceovxctx.html