JavaScript登入記住密碼操作的簡單程式碼分享-js教程-PHP中文網

首頁

web前端

js教程

JavaScript登入記住密碼操作的簡單程式碼分享

黄舟

Mar 23, 2017 pm 02:32 PM

本文跟大家分享一段簡單的js程式碼實作使用者登入記住密碼操作，程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
</head>
<body>
<form id="loginForm">
  <input id="user" type="text" placeholder="用户名"><br>
  <input id="pswd" type="password" placeholder="密码"><br>
  <label><input id="remember" type="checkbox">记住密码</label><br>
  <input type=&#39;submit&#39; value="登录">
</form>
<script>
  window.onload = function(){
    var oForm = document.getElementById(&#39;loginForm&#39;);
    var oUser = document.getElementById(&#39;user&#39;);
    var oPswd = document.getElementById(&#39;pswd&#39;);
    var oRemember = document.getElementById(&#39;remember&#39;);
    //页面初始化时，如果帐号密码cookie存在则填充
    if(getCookie(&#39;user&#39;) && getCookie(&#39;pswd&#39;)){
      oUser.value = getCookie(&#39;user&#39;);
      oPswd.value = getCookie(&#39;pswd&#39;);
      oRemember.checked = true;
    }
    //复选框勾选状态发生改变时，如果未勾选则清除cookie
    oRemember.onchange = function(){
      if(!this.checked){
        delCookie(&#39;user&#39;);
        delCookie(&#39;pswd&#39;);
      }
    };
    //表单提交事件触发时，如果复选框是勾选状态则保存cookie
    oForm.onsubmit = function(){
      if(remember.checked){ 
        setCookie(&#39;user&#39;,oUser.value,7); //保存帐号到cookie，有效期7天
        setCookie(&#39;pswd&#39;,oPswd.value,7); //保存密码到cookie，有效期7天
      }
    };
  };
  //设置cookie
  function setCookie(name,value,day){
    var date = new Date();
    date.setDate(date.getDate() + day);
    document.cookie = name + &#39;=&#39; + value + &#39;;expires=&#39;+ date;
  };
  //获取cookie
  function getCookie(name){
    var reg = RegExp(name+&#39;=([^;]+)&#39;);
    var arr = document.cookie.match(reg);
    if(arr){
      return arr[1];
    }else{
      return &#39;&#39;;
    }
  };
  //删除cookie
  function delCookie(name){
    setCookie(name,null,-1);
  };
</script>
</body>
</html>

登入後複製

以上是JavaScript登入記住密碼操作的簡單程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7781

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

小紅書怎麼登入以前的帳號？它換綁後原來號碼遺失了怎麼辦？ Mar 21, 2024 pm 09:41 PM

隨著社群媒體的快速發展，小紅書成為許多年輕人分享生活、探索新產品的熱門平台。在使用過程中，有時使用者可能會遇到登入先前帳號的困難。本文將詳細探討如何解決小紅書登入舊帳號的問題，以及如何應對更換綁定後可能遺失原帳號的情況。一、小紅書怎麼登入以前的帳號？ 1.找回密碼登入如果長時間未登入小紅書，可能導致帳號被系統回收。為了恢復存取權限，你可以嘗試透過找回密碼的方式重新登入帳號。操作步驟如下：（1）開啟小紅書App或官網，點選「登入」按鈕。（2）選擇「找回密碼」。（3）輸入你註冊帳號時所使用的手機號碼

wallpaperengine登入別的號碼後下載別人的桌布怎麼辦 Mar 19, 2024 pm 02:00 PM

當你在自己電腦上登過別人steam帳號之後，剛好這個別人的帳號也有wallpaper軟體，切換回自己帳號之後steam就會自動下載別人帳號訂閱的桌布，使用者可以透過關閉steam雲端同步解決。 wallpaperengine登入別的號碼後下載別人的桌布怎麼辦1、登陸你自己的steam帳號，在設定裡面找到雲端同步，關閉steam雲端同步。 2.登陸你之前登陸的別人的steam帳號，打開wallpaper創意工坊，找到訂閱內容，然後取消全部訂閱。（以後防止找不到壁紙，可以先收藏再取消訂閱）3、切換回自己的stea

《陰陽師》茨木童子典藏皮膚登入即領，禪心雲外鏡新造型即將上線！ Jan 05, 2024 am 10:42 AM

山野間萬鬼嘶鳴，隱沒兵刃交接之聲，越嶺奔赴而來的鬼將，心中戰意洶湧，以炎火為號，率百鬼衝鋒迎戰。【熾焱百煉•茨木童子典藏皮膚上線】鬼角熾焰怒燃，鎏金眼眸迸發桀駿戰意，白玉甲片裝飾戰袍，彰顯大妖不羈狂放的氣勢。雪白飄揚的袖擺上，赤焰攀附交織，金紋烙印其中，燃點一片緋艷妖異色彩。妖力凝聚而成的鬼火咆哮而至，烈焰令群巒為之震動，煉獄間歸來的妖鬼啊，一同懲戒進犯之人吧。【專屬動態頭像框•熾焱百煉】【專屬插畫•焰火將魂】【傳記鑑賞】【獲取方式】茨木童子典藏皮膚·熾焱百煉將於12月28日維護後上架皮膚商店，

Discuz後台登入問題解決方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz後台登入問題解決方法大揭秘，需要具體程式碼範例隨著網路的快速發展，網站建置變得越來越普遍，而Discuz作為一款常用的論壇建站系統，受到了許多站長的青睞。然而，正是因為其功能強大，有時候我們在使用Discuz的過程中會遇到一些問題，例如後台登入問題。今天，我們就來大揭秘Discuz後台登入問題的解決方法，並且提供具體的程式碼範例，希望能幫助到有需要

快手電腦版怎麼登入-快手電腦版的登入方法 Mar 04, 2024 pm 03:30 PM

近日有一些小夥伴諮詢小編快手電腦版怎麼登入?下面就為大家帶來了快手電腦版的登入方法，有需要的小夥伴可以來了解了解哦。第一步：先在電腦的瀏覽器上百度搜尋快手官網。第二步：在搜尋結果清單裡面選取第一條。第三步：進入快手官網主頁面後，點選影片的選項。第四步：點選右上角的使用者頭像。步驟五：在彈出的登入選單裡面點選二維碼登入。步驟六：之後打開手機上的快手，點選左上角的圖示。第七步：點選二維碼標誌。第八步：在我的二維碼介面點擊右上角的掃描圖示之後，掃描電腦上的二維碼即可。第九步：最後電腦版的快手就登入成

夸克怎麼登入兩個設備 Feb 23, 2024 pm 10:55 PM

夸克怎麼登入兩個設備?夸克瀏覽器是支援同時登陸兩個設備的，但是多數的小夥伴不知道夸克瀏覽器如何登陸兩個設備，接下來就是小編為用戶帶來的夸克登陸兩個設備方法圖文教程，有興趣的用戶快來一起看看吧！夸克瀏覽器使用教學夸克怎麼登入兩個裝置1、先開啟夸克瀏覽器APP，主頁點選【夸克網盤】;2、接著進入夸克網盤介面，選擇【我的備份】服務功能;3、最後選擇其中的【切換設備】即可更換新設備登陸兩個。

百度網盤網頁版怎麼進？百度網盤網頁版登入入口 Mar 13, 2024 pm 04:58 PM

　　百度網盤不僅能儲存各種軟體資源，還能分享給別人，支援多端同步，如果你的電腦沒有下載客戶端，可以選擇進入網頁版使用。那麼百度網盤網頁版要怎麼登入呢？下面就來看看詳細介紹。　　百度網盤網頁版登入入口：https://pan.baidu.com（複製連結至瀏覽器開啟）　　軟體介紹　　1、分享　　提供文件分享功能，使用者將文件整理，分享給需要的小夥伴。　　2、雲端　　不佔用太多內存，大多數檔案都保存在雲端，有效節省電腦空間。　　3、相簿　　支援雲相簿功能，將照片匯入到雲盤中，然後整理，方便大家查看。　　

小紅書只記得帳號怎麼登入？只記得帳號怎麼找回來？ Mar 23, 2024 pm 05:31 PM

小紅書如今已經融入了許多人的日常生活，其豐富的內容和便捷的操作方式讓使用者樂此不疲。有時候，我們可能會忘記帳號密碼，只記得帳號而無法登入確實讓人感到困擾。一、小紅書只記得帳號怎麼登入？當忘記密碼時，我們可以透過手機驗證碼的方式登入小紅書。具體操作如下：1.開啟小紅書App或網頁版小紅書；2.點選「登入」按鈕，選擇「帳號密碼登入」；3.點選「忘記密碼？」按鈕；4.輸入你的帳號，點選「下一步」；5.系統會發送驗證碼到你的手機，輸入驗證碼後點選「確定」；6.設定新的密碼並確認。你也可以透過第三方帳號（如

See all articles

JavaScript登入記住密碼操作的簡單程式碼分享

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題