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

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

近期有不少的小伙伴通过扣丁学堂官网咨询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基础教程

上一篇 10月22日HTML5直播公开课之京东完美瀑布流懒加载代码技术解析下一篇扣丁学堂简述如何解决HTML5中图片之间的缝隙

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

热门专区

课程推荐