扣丁学堂HTML5培训简述如何实现LocalStorage记住用户和密码功能

2018-10-23 19:36:54 488浏览

近期有不少的小伙伴通过扣丁学堂官网咨询LocalStorage记住用户和密码功能的问题,本篇文章扣丁学堂HTML5培训小编就和大家分享一下如何实现LocalStorage记住用户和密码功能,希望可以帮到小伙伴们。



扣丁学堂HTML5培训简述如何实现LocalStorage记住用户和密码功能



随着HTML5规范的普及,我们不再用cookie来实现记住密码,通常会用的LocalStorage及本地缓存。对于Cookie来说它只有一个document.cookie这一个API可以使用,不管是读取Cookie还是存储Cookie你都只能使用它。


然而LocalStorage,你存储的时候有localStorage.setItem(),你读取的时候有localStorage.getItem(),你想要删除的时候有localStorage.removeItem().此外在存储时,它们事以键值对的形式存储的.所以更易于使用.并且localStorge的储存空间大,有5M,并且是永久储存,除非你主动删除。


下面附一个简单的小例子:


<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
   <form>
        <h3>Log in</h3>
        <input type="text" name="user" placeholder="user" id="user">
        <input type="password" name="pass" placeholder="password" id="pass">
        <input type="checkbox" id="remember" checked><br/><br/>
        <input type="button" value="登录" id="sub" onclick="loginBtn_click()">
    </form>
<script type="text/javascript">
    $(document).ready(function(){
        var strName = localStorage.getItem('UserName');
        var strPass = localStorage.getItem('UserPass');
        if(strName){
            $('#user').val(strName);
        }if(strPass){
            $('#pass').val(strPass);
        }
    });
    function loginBtn_click(){
        debugger
            var strName = $('#user').val();
            var strPass = $('#pass').val();
            localStorage.setItem('UserName',strName);
            if($('#remember').is(':checked')){
                localStorage.setItem('UserPass',strPass);
            }else{
                localStorage.removeItem('UserPass');
            }
            window.location.reload();
        }
</script>



想要了解更多关于HTML5方面内容的小伙伴,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频,HTML5培训后的前景无限,行业薪资和未来的发展会越来越好的,扣丁学堂老师精心推出的HTML5视频直播定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:559883758。



【关注微信公众号获取更多学习资料】



查看更多关于“HTML5开发技术资讯”的相关文章>>



标签: 扣丁学堂HTML5培训 如何实现LocalStorage记住用户和密码功能 HTML5培训 HTML5视频教程 HTML5在线课程 HTML5在线学习 HTML5在线视频 HTML5从入门到精通 html5基础教程
微信
微博
15311698296

全国免费咨询热线

邮箱:codingke@1000phone.com

官方群:148715490

北京千锋互联科技有限公司版权所有   北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
京ICP备12003911号-6   Copyright © 2013 - 2019
返回顶部 返回顶部