cookie實現記住登入名和密碼（如何通過cookie登入賬號）

2023-06-29 01:07:10

在做java web網站開發時，為了避免每次登入都需要輸入使用者名稱和密碼，我們會使用Cookie技術來實現記住密碼功能，在這裡玄武老師使用簡單的專案案例來教大傢俱體的實現過程。

前期準備

1、下載好jquery，在這裡我們採用3.5.1版本的jquery.min.js。jquery官網下載地址：https://jquery.com/

2、下載好jquery.cookie.js，在這裡我們採用1.4.1版本（注意下載後是壓縮包，解壓後我們只要裡面的jquery.cookie.js即可）。官方下載地址：
https://plugins.jquery.com/cookie/

記住密碼功能實現

1、在Eclipse中新建名為demo的java web專案。
2、在WebContent目錄下新建js目錄，將jquery.min.js和jquery.cookie.js拷貝進去。

3、在WebContent目錄下新建login.jsp（注意要先引入jquery.min.js，再引入jquery.cookie.js），具體內容如下：

登入頁面 $(function(){ getCookie(); }) //設定Cookie方法 function setCookie(){ var username = $('#username').val(); var password = $('#password').val(); //獲取記住密碼是否選中 var flag = $("#remember").is(":checked"); if(flag){//如果選中-->記住密碼登入 //cookie有效時間7天，也可以設定為永久，把時間去掉就行 $.cookie("remember","true",{expires:7}); $.cookie("username",username.trim(),{ expires: 7 }); $.cookie("password",password.trim(),{ expires: 7 }); }else{//如果沒選中-->不記住密碼登入 //設定cookie有效時間-1，直接將瀏覽器端原先儲存的cookie失效 $.cookie("remember","false",{expires:-1}); $.cookie("password", "",{expires:-1}); $.cookie("username", "",{expires:-1}); } } //獲取cookie方法，自動填充使用者名稱和密碼 function getCookie(){ var remember = $.cookie("remember"); //獲取cookie中的使用者名稱 var username = $.cookie("username"); //獲取cookie中的登陸密碼 var password = $.cookie("password"); //記住密碼為true的話把“記住使用者名稱和密碼”覈取方塊勾選住 if(remember){ $("#remember").attr("checked","true"); } //使用者名稱存在的話把使用者名稱填充到使用者名稱文字框 if(username!=""){ $("#username").val(username); }else{ $("#username").val(""); } if(password!=""){//密碼存在的話把密碼填充到密碼文字框 $("#password").val(password); }else{ $("#password").val(""); } } //登入按鈕點選時間 function login(){ //呼叫setCookie()方法 setCookie(); //傳送登陸請求，在此省略 }使用者名稱：密碼：記住使用者名稱和密碼？登錄

效果圖

部署專案，訪問login.jsp，發現只要如圖效果點選登入後，再次訪問登入頁，發現使用者名稱和密碼已經記住密碼選項都正常顯示，如果去掉記住使用者名稱密碼選項，點選登入，然後再次訪問首頁就發現，使用者名稱和密碼都不會自動填充了。

總結

以上就是利用Cookie來實現簡單的記住使用者名稱和密碼功能，有興趣的同學也可在測試時檢視下瀏覽器的cookie資訊，會對此有更深刻的體會。