1. 程式人生 > >JS:Cookie的寫入和讀取

JS:Cookie的寫入和讀取

1,Cookie的寫入   2,Cookie的讀取

這裡用到了document的cookie的方法。目前只支援在不關閉瀏覽器的情況下。後面再修改。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cookie的讀取</title>
<script language="javascript">
	function submit2(){
	alert("提交成功");
	writeCookie();
	return true;
}
function testRadio(){
	var charactergroup=document.forms[0].elements["sex"];
	for(var i=0;i<charactergroup.length;i++){
		if(charactergroup[i].checked==true){
			document.cookie=encodeURI("sex="+charactergroup[i].value);
		}
	}
}
function writeCookie(){
	document.cookie=encodeURI("username="+document.form1.username.value);
	document.cookie=encodeURI("password="+document.form1.password1.value);
	testRadio();
}
function readCookie(){
	var cookieString=decodeURI(document.cookie);
	if(cookieString.length!=0){
	var cookieArray=cookieString.split(";");
	for(var i=0;i<cookieArray.length;i++){
		var cookieNum=cookieArray[i].split("=");
		var cookieName=cookieNum[0];
		var cookieValue=cookieNum[1];
		alert("Cookie名稱為:"+cookieName+" Cookie值為:"+cookieValue);
	}
	}else
	alert("暫時沒有Cookie,請填寫資訊,單擊提交按鈕");
}
</script>
</head>

<body >
<table width="800" height="689" border="0" align="center">
<form action="" method="post" name="form1">
  <tr>
    <td background="部落格使用者註冊.jpg">
	  <table width="800" height="451" border="0">
        <tr>
          <td height="175" valign="top"><table width="100%"  border="0">
              <tr>
                <td width="30%" class="zi"><div align="right">使用者名稱:</div></td>
                <td width="70%" align="center">
                  <div align="left">
                    <input name="username" type="text" size="40">
                    </div></td></tr>
              <tr>
                <td class="zi"><div align="right">密碼:</div></td>
                <td>
                  <div align="left">
                    <input name="password1" type="password" size="20" oncopy="return false" oncut="return false" onpaste="return false" style="font-family: Wingdings">
                    </div></td></tr>
              <tr>
                <td class="zi"><div align="right">性別:</div></td>
                <td>
                  <div align="left">
                    <input type="radio" name="sex" value="男" checked> 
                    <span class="zi">男</span>                    
                    <input type="radio" name="sex" value="女">
                    <span class="zi">                    女</span>           
                      </div></td></tr>
          </table></td>
        </tr>
        <tr>
          <td valign="top"><table width="100%"  border="0">
            <tr>
              <td width="22%">&nbsp;</td>
              <td width="13%"><input type="button" value="提交" width="51" height="20" onClick="return submit2();"></td>
              <td width="39%"><input type="button" value="讀取Cookie" width="65" height="20" onClick="readCookie();"></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

執行: