本地存储--十天免登录

74 阅读1分钟

通过localStorage存储到本地数据,在下次打开页面时读取本地数据,将本地数据的user和password读取到input的value值

<div class="login">
    <form>
        <p>
            <input name="user" placeholder="用户名">
        </p>
        <p>
            <input name="pwd" placeholder="密码">
        </p>
        <p>
            <input name="cbx" type="checkbox">10天免登录
        </p>
        <p>
            <button>登录</button>
        </p>
    </form>
</div>

    <script>

        // 第一次打开,就获取到本地的数据,是字符串,将字符串转换成对象
        // 把对象里的数用户名和密码,填写到输入框中
        var oForm=document.forms[0];
        //获取本地数据,转换成对象,如果是null,就默认给一个新对象
        var userStorage= JSON.parse(localStorage.getItem('user')||'{}');
        if (userStorage.user) {
            oForm.user.value=userStorage.user;
            oForm.pwd.value=userStorage.pwd;
        }
        
        //1. 点击登录按钮,判断是否打钩,如果打钩,就把用户名和密码做成一个对象
        // 将对象转换成字符串,存储到本地
        oForm.onsubmit=function(){
            var oUser={
                user:this.user.value,
                pwd:this.pwd.value
            }
            if (this.cbx.checked) {
                localStorage.setItem('user',JSON.stringify(oUser))
            }
            return false;
        }

    </script>