简述如何实现LocalStorage记住用户和密码功能
发布在前端专项讨论2018年11月14日view:567
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

  文章转载于:http://www.codingke.com/article/4067   近期有不少的小伙伴通过扣丁学堂官网咨询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>

Log in

<input type="text" name="user" placeholder="user" id="user"> <input type="password" name="pass" placeholder="password" id="pass"> <input type="checkbox" id="remember" checked>

<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技术交流群:673883249。​

评论
发表评论
暂无评论
WRITTEN BY
PUBLISHED IN
前端专项讨论

来了你就不会后悔

我的收藏