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 /> 
            密码：<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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容