local storage 简单应用‘’记住密码’

前些时候一直用cookie等来进行登录页面记住面膜操作，但是由于其存储容量小等缘故，所以后来转向local storage，原理为：当用户勾选记住密码时，local storage 存储用户名密码同时存储记住密码checked,反之则为空；以下为我关于记住密码操作的代码分享

html部分

</head>
<body  >
<div class="container1">
    <div class="login">
        <img src="http://123.56.25.169:8099/esmp/img/log.png" alt=""/>
    </div>
</div>
<div id="middle">
    <div class="main">
        <div class="loginin rt" style="position: relative">
            <div class="header">
                <img src="http://123.56.25.169:8099/esmp/img/tip.png" alt=""/>
            </div>
                <div class="mainsection form-group">
                    <div style=" 246px;height: 46px; margin-bottom: 18px">
                        <b class="lf markk"></b>
                        <input class="lf username" type="text" placeholder="用户名"
                               id="user" autofocus/>
                    </div>
                    <div style=" 246px;height: 46px;">
                        <b class="lf markk markk1"></b>
                        <input class="lf username" type="password" placeholder="密码" autofocus id="password"/>
                    </div>
                </div>
                <div class="pw">
                    <div class="loadingstatus lf">
                    </div>
                    <div class="rt" style="font-size: 12px;color: #707070;line-height: 26px;">
                        <input type="checkbox" class="lf" id="autoLogin"/>
                        <span class="rem">
                        自动登录
                        </span>
                    </div>
                </div>
                <div class="footersection" style="text-align: center">
                    <button id="btn1">登 录</button>
                    <div class="registerhtml">
                        <span class="lf">没有账号？</span>
                        <a href="http://123.56.25.169:8099/esmp/register.html" class="lf">免费注册</a>
                    </div>
                </div>
        </div>

    </div>
</div>

</body>
</html>

js部分
//记住密码
if($('#autoLogin').is(':checked')) {
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);
}else{
    localStorage.setItem('username', "");
    localStorage.setItem('password', "");
}

//记住密码end
//用户名密码value获取
$("#user").val(localStorage.getItem('username'));
$("#password").val(localStorage.getItem('password'));
if(localStorage.getItem('username')==""){
    $("#autoLogin").attr("checked",false)
}else{
    $("#autoLogin").attr("checked",true)
}
//用户名密码value获取end

相关阅读:
输入三个整数x,y,z，请把这三个数由小到大输出
 随机三位数
 球反弹高度
 成绩分类
 java判断开头结尾
 二分法查找
 Leetcode 6. ZigZag Conversion（找规律，水题）
Leetcode 5. Longest Palindromic Substring(最长回文子串， Manacher算法)
Leetcode 4. Median of Two Sorted Arrays(中位数+二分答案+递归)
Leetcode 3. Longest Substring Without Repeating Characters(string 用法水题)
原文地址：https://www.cnblogs.com/bellagao/p/6264436.html