⑴ JS登錄界面如何儲存用戶名和密碼信息,實現登錄的時候查詢驗證匹配,不用資料庫有三個用戶,求JS代碼
HTML代碼
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用戶名:<inputtype="text"name="username"id="username_input"></br>
密碼:<inputtype="老罩喊password"name="passwd"id="passwd_input"></br>
<inputtype="button"value="登錄"onclick="login()">
</div>
</body>
</html>
Js代碼悶穗
<scripttype="text/javascript">
varaccountAll=[
{'username':'admin','passwd':'admin123'},
{'username':'jack','passwd':'jack'}
]//存儲賬戶json數據的數組
functionlogin(){//登陸判斷
varusername=document.getElementById('username_input').value;//獲取username輸入侍野框內容
varpasswd=document.getElementById('passwd_input').value;//獲取passwd輸入框內容
varaccount=accountAll.filter(function(e){returne.username==username})[0];//篩選賬號返回數組,不存在則返回空數組
if(!account){
console.log('賬戶不存在');
}else{
if(account.username==username&&account.passwd==passwd){
console.log('登陸成功');
}else{
console.log('登陸失敗');
}
}
}
</script>
⑵ 如何利用js操作cookie實現記住密碼功能
【什麼是cookie】
「cookie 是存儲於訪問者的計算機中的變數。每當同一台計算機通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。」
不同的瀏覽器可能對cookie的儲存方式不同,但是相同的是cookie中的內容都是保存在客戶一端的。(session是保存在伺服器上的)
【cookie的幾點注意】
說的通俗一點,cookie就是一個字元串(這點可以用alert(typeof document.cookie)來驗證),用來保存一些客戶信息。
程序員可以對其寫入任何想寫入的東西,只要不超過cookie的大小限制(4kb)。
cookie的操作辦法最簡單的說法就是對document.cookie進行操作(寫入你要需保存的內容)。
cookie有一個關鍵字是expires,它是用來設置cookie的有效期的,默認情況(不設置expires)型喚是當瀏覽器關閉的時候,自動清除cookie。
一般來說,cookie的形式都是這樣的:"cookieName1=cookie1;cookieName2=cookie2;expires=" + date,這里需要注意幾點:
1.注意分號
";expires="之前的字元串你可以隨便寫,但卜租塌是";expires="必須遵循這個寫法,尤其是這個分號不能少,不然瀏覽器是認不出你的expires(過期時間),而把它當成cookie內容的一部分。
例如:
如果你寫成
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);//date設置為十天之後
6 document.cookie = "username=findingsea^password=123^expires=" + date.toGMTString();//toGMTString方法將date轉換成格林尼治時間格式
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
打開firefox下的選項-->隱私-->刪除私人Cookie
可以到cookie過期的時間為當前會話結束時,也就是瀏覽器關閉的時候。換而言之,就是我們設置的expires完全沒有起作用。
要fix也很容易,只要在上段代碼中,在expires前加一個分號,也就型圓是改成"...^;expires=",重新運行firefox查看cookie
可以看到過期時間為10之後(今天是2012年8月31日),expires設置成功,所以說分號很重要,很重要!!!
2.如何清除cookie
其實清除cookie這種說法是不準確的,應該是說讓cookie過期。因為不能直接對cookie置空,(如果以為document.cookie="",這樣就能清空cookie,我只能說少年你還是太天真了),而使cookie的方法也很簡單,就是設置expires。我們可以把expires設置到很久以後,讓cookie能長期保存,那同樣我們也能把cookie設置到過去,讓cookie馬上過期。這個「過去」就是1970年1月1號,我們將expires設置到這個時間,cookie就過期了。至於為什麼是這個時間,請參考關於1970-1-1 00:00.000的知識 。
3.如何設置和獲取cookie
<在一條cookie中設置多個變數>
JavaScript沒有提供根據cookie名來獲取cookie值的方法。上面已經講過了,document.cookie只是一個字元串而已,我們就對其進行字元串解析即可。要在獲取的時候進行解析,就要需要在設置的時候設置標識符,這里需要注意的點和第一點剛好相反,在第一點中,我們是千叮嚀萬囑咐不要忘記分號,而且在設置標識符的時候,我建議盡量不要用分號當做分隔符,我們來看一下對比;
代碼1:
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea;password=123;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
代碼2:
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea^password=123^;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
可以很清楚地看到,代碼1中的password=123都「吞掉了」,造成這個現象的原因是,瀏覽器在保存cookie的時候,在讀到分號之後,就認為cookie的內容結束了,瀏覽器理想的cookie形式是"cookieName=cookie;expires=date",但是顯然我們並不滿足這樣,所以要在一條cookie中設置多個值,就需要像代碼2這樣用標示符(不要分號)進行分割。然後在讀取的時候,也根據標示符進行逐個讀取。
<設置多個cookie>
當然當然當然,以上是正對相對復雜的需要我們在同一條cookie中設置多個變數的情況,更規范的情況是一條cookie就儲存一個對象。不過這樣的話,你的cookie就要佔用更多的空間(相比於一條cookie中設置多個變數而已,因為你需要為每個cookie都設置一個expires)。不過這樣的操作更加簡單和規范,推薦在變數少的情況下使用。
⑶ 怎麼用js操作cookie緩存多個用戶名密碼,點擊緩存的信息可以直接登陸 ,類似於qq登陸時記住密碼功能
JS無法直接在客戶端操作cookie,沒有許可權,也很不安全。因為這樣屬於操作客戶端文件了,很危險的。
運行邏輯是在瀏覽登陸頁面的時候,瀏覽器會自動把對應的cookie傳送給伺服器,伺服器返回新也面的時候,可以把COOKIE的內容傳送給客戶端,或是直接生產JS數組之類的,
再用JS或是新的HTM5實現下拉功能,下拉功能同步到密碼框值設定。
以前很多網站不是有記住密碼功能嗎,還有永不過期功能嗎?
你那個功能只不過是多了個選擇框,並綁定密碼同步改變密碼框值。
⑷ 純JS記住賬號密碼
參照 - 純臘悶JS操作Cookie
點擊submit按鈕時,會調用此函數
文檔載入完畢後,執行此函數
**說明 : **初始時,瀏覽器未保存差滾Cookie,JS給各個表單賦空值,賦輪慶彎復選框未勾選狀態
**說明 : **未勾選保存密碼復選框,JS只提交表單到指定Action,未保存Cookie,同上
**說明 : **瀏覽器成功保存了用戶名與密碼
⑸ 100分 求js寫的自動登陸帳號密碼保存功能~源碼
/**
* 操作Cookie 添加
* @param name
* @param value
* @return
*/
function SetCookie(name,value,days)//兩個參數,一個是cookie的名子,一個帆沒是值
{
var Days = 30;
if(typeof(days)=="undefined"||isNaN(days))
Days=parseInt(days.toString());
//此 cookie 將被保存 30 天 -1為瀏覽器關閉
if(Days!=-1){
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}else{
document.cookie = name + "="+ escape (value) + ";expires=-1";
}
}
/**
* 操作Cookie 提取 後台必須是escape編碼
* @param name
* @return
*/
function getCookie(name)//取cookies函數
{
var arr = document.cookie.match(new RegExp("(^| )"搏搏+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
/**
* 操作Cookie 刪除
* @param name
* @return
*/
function delCookie(name)//刪除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - (86400 * 1000 * 1));
var cval=getCookie(name);
if(cval!=null)
document.cookie = name + "="+ escape (cval) + ";expires="+exp.toGMTString();
}
/**
* 根據ID獲取對象
* @param objName
* @return
*/
function GetObj(objName){
if(typeof(objName)=="undefined")
return null;
if(document.getElementById)
return eval('document.getElementById("'+objName+'")');
else
return eval('document.all.'+objName);
}
/**
* 給String 添加trim方法
*/
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
/**
* 給String添加isNullOrempty的方法
*/
String.prototype.isnullorempty=function(){
if(this==null||typeof(this)=="undefined"||this.trim()=="")
return true;
return false;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login.html</title>
<script type="text/javascript" src="jsTool.js"><基轎祥/script>
<script type="text/javascript">
var cookieName_username="LOGIN_USER_NAME_TEST";
var cookieName_password="LOGIN_PASSWORD_TEST";
var cookieName_autologin="LOGIN_AUTO_TEST";
//得到Cookie信息
function getUserInfoByCookie(){
var uname=getCookie(cookieName_username);
if(uname!=null&&!uname.toString().isnullorempty()){
GetObj('ttuserName').value=uname;
GetObj('ck_saveuser').checked=true;
}
var upass=getCookie(cookieName_password)
if(upass!=null&&!upass.toString().isnullorempty()){
GetObj('ttpassword').value=upass;
GetObj('ck_savepass').checked=true;
}
var autologin=getCookie(cookieName_autologin)
if(autologin!=null&&!autologin.toString().isnullorempty())
if(autologin.toString().trim()=="true"){
GetObj('ck_autologin').checked=true;
login();//登錄
}
}
/**
*登錄(保存信息)
*/
function login(){
var tusername=GetObj('ttuserName');
if(tusername.value.trim().isnullorempty()){
alert('您尚未輸入用戶名!請輸入!');
tpassword.focus();
return;
}
var tpassword=GetObj('ttpassword');
if(tpassword.value.trim().isnullorempty()){
alert('您尚未輸入密碼!請輸入!');
tpassword.focus();
return;
}
delCookie(cookieName_username);//刪除用戶名Cookie
var tsaveuser=GetObj('ck_saveuser');
if(tsaveuser.checked)
SetCookie(cookieName_username,tusername.value.trim(),7);//保存到Cookie中 保存7天
delCookie(cookieName_password);//刪除密碼
var tsavepass=GetObj('ck_savepass');
if(tsavepass.checked)
SetCookie(cookieName_password,tpassword.value.trim(),7);
var autologin=GetObj('ck_autologin');
SetCookie(cookieName_autologin,autologin.checked,7);
alert('登錄成功!');
}
</script>
</head>
<body onload="getUserInfoByCookie()">
用戶名:<input type="text" value="" name="ttuserName" id="ttuserName" maxlength="16"/>
密碼:<input type="password" value="" name="ttpassword" id="ttpassword" maxlength="16"/>
<input type="checkbox" name="ck_saveuser" id="ck_saveuser"/>保存用戶名
<input type="checkbox" name="ck_savepass" id="ck_savepass"/>保存密碼
<input type="checkbox" name="ck_autologin" id="ck_autologin"/>自動登錄
<input type="button" value="登錄(保存)" onclick="login()"/>
</body>
</html>
能不能審批呀