簡述如何實現LocalStorage記住用戶和密碼功能
阿新 • • 發佈:2018-11-14
window inb coo reload 展會 本地 精通 debugger 讀取
文章轉載於:http://www.codingke.com/article/4067
近期有不少的小夥伴通過扣丁學堂官網咨詢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技術交流群:673883249。?
簡述如何實現LocalStorage記住用戶和密碼功能