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>

运行: 

3,Cookie的删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script language="JavaScript">
		function deleteCookie(name){
			var date=new Date();
			date.setTime(date.getTime()-10000000);//删除Cookie,实际上是将其过期时间设置为过去的时间
		}
	</script>
	<body>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42192693/article/details/82623142