mui 使用LocalStore记住用户密码方法示例

<!DOCTYPE html> 

<html> 

    <head> 

        <meta charset="utf-8"> 

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 

        <title></title> 

        <script src="js/mui.min.js"></script> 

        <link href="css/mui.min.css" rel="stylesheet" /> 

        <script type="text/javascript" charset="utf-8"> 

            mui.init(); 

        </script> 

        <style> 

            body { 

                margin-left: 500px; 

            } 

            fieldset { 

                width: 380px; 

                height: 220px; 

                text-align: center; 

            } 

             

            #txtId, 

            #txtPwd { 

                width: 240px; 

                margin: 10px auto; 

            } 

        </style> 

    </head> 

    <body> 

        <fieldset id=""> 

            <legend>用户登录</legend> 

            用户名:<input type="text" id="txtId" /><br /> &nbsp;&nbsp;&nbsp; 

            密码:<input type="password" id="txtPwd" /><br /> 

            <input type="checkbox" id="chkRem" />记住密码<br /> 

            <input type="button" value="登录" onclick="remPwd()" /> 

        </fieldset> 

        <script type="text/javascript"> 

var Id = localStorage.getItem("txtId"); 

if(Id != null) //如果缓存中有数据,则加载出来

            { 

                document.getElementById("txtId").value = Id; 

                document.getElementById("txtPwd").value = localStorage.getItem("txtPwd"); 

                document.getElementById("chkRem").checked = "checked"; 

            } 

//将账号与密码保存到Localstore 

function remPwd() { 

var check = document.getElementById("chkRem"); 

if(check.checked) //判断记住密码项是否勾选,是则记住密码到本地缓存 

                { 

var id = document.getElementById("txtId").value; 

var pwd = document.getElementById("txtPwd").value; 

                    localStorage.setItem("txtId", id); 

                    localStorage.setItem("txtPwd", pwd); 

                } else //否则就移除本地缓存 

                { 

                    localStorage.removeItem("txtId"); 

                    localStorage.removeItem("txtPwd"); 

                } 

            } 

        </script> 

    </body> 

</html>

posted @ 2017-11-27 17:31  alice-you  阅读(1452)  评论(0编辑  收藏  举报