首页技术为王JavascriptJS入门到精通 第15章 使用Cookie

JS入门到精通 第15章 使用Cookie

分类Javascript时间2026-07-03 16:46:22发布信义之树浏览97
导读：一、练习1. 练习1 （1）源代码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Cookie的写入</title> <li...

一、练习

1. 练习1

  （1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>Cookie的写入</title>
<link href="CSS/sheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

function submit2(){
    if(document.form1.username.value.length==0){
        alert("用户名不可为空");
        return false;
    }
    if(document.form1.password1.value.length==0){
        alert("密码不可为空");
        return false;
    }
    if(document.form1.password1.value!=document.form1.password2.value){
        alert("两次密码输入不相同");
        return false;
    }
    if(!checkemail(document.form1.mail.value)){
        alert("您输入Email地址不正确!");form1.mail.select();return false;
    }
    alert("提交成功");
    writeCookie();
    return true;
}

function writeCookie(){
    document.cookie=encodeURI("username="+document.form1.username.value);
    document.cookie=encodeURI("password="+document.form1.password1.value);
    testRadio();
}
    
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 checkemail(str){
     //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
    var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; 
    var objExp=new RegExp(Expression);
    if(objExp.test(str)==true){
        return true;
    }else{
        return false;
    }
}
    
    
 window.addEventListener('DOMContentLoaded', function() {   
  
 document.getElementById('btnReset').addEventListener('click', function(e) {
        e.preventDefault();
        
        document.getElementById('myForm').reset(); // 调用表单自带的 reset 方法
        
    });
     
  document.getElementById('btnClose').addEventListener('click', function(e) {
        e.preventDefault();
        
        window.close(); 
    });     

});
</script>
</head>

<body>
<table width="800" height="689" border="0">
<form action="" method="post" name="form1" id="myForm">
  <tr>
    <td background="博客用户注册.jpg">
      <table width="800" height="451" border="0">
        <tr>
          <td width="113" rowspan="3">&nbsp;</td>
          <td width="491" height="140">&nbsp;</td>
          <td width="182" rowspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td height="175" valign="top"><table width="100%"  border="0">
              <tr>
                <td width="30%"><div>用户名：</div></td>
                <td width="70%">
                  <div>
                    <input name="username" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>密码：</div></td>
                <td>
                  <div>
                    <input name="password1" type="password" style="font-family: Wingdings" size="20" maxlength="10" oncopy="return false" oncut="return false" onpaste="return false">
                  </div></td></tr>
              <tr>
                <td><div>重复密码：</div></td>
                <td>
                  <div>
                    <input name="password2" type="password" style="font-family: Wingdings" size="20" maxlength="10" oncopy="return false" oncut="return false" onpaste="return false">
                  </div></td></tr>
              <tr>
                <td><div>姓名：</div></td>
                <td>
                  <div>
                    <input name="realname" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>性别：</div></td>
                <td>
                  <div>
                    <input type="radio" name="sex" value="男" checked> 
                    <span>男</span>                    
                    <input type="radio" name="sex" value="女">
                    <span>                    女</span>           
                      </div></td></tr>
              <tr>
                <td><div>QQ号码：</div></td>
                <td>
                  <div>
                    <input name="qqnum" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>主页：</div></td>
                <td>
                  <div>
                    <input name="zy" type="text" size="40" maxlength="30">
                  </div></td></tr>
              <tr>
                <td><div>兴趣：</div></td>
                <td>
                  <div>
                    <input name="xq" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>Email：</div></td>
                <td>
                  <div>
                    <input name="mail" type="text" size="40" maxlength="30">
                  </div></td></tr>
          </table></td>
        </tr>
        <tr>
          <td valign="top"><table width="100%"  border="0">
            <tr>
              <td width="33%">&nbsp;</td>
              <td width="14%"><input type="image" src="1.gif" width="51" height="20" onClick="return submit2();"></td>
              <td width="14%"><input type="image" src="2.gif" width="51" height="20" id="btnReset" onClick="javascript:reset();"></td>
              <td width="22%"><input type="image" src="3.gif" width="51" height="20"id="btnClose" onClick="javascript:window.close();"></td>
              <td width="17%">&nbsp;</td>
            </tr>
          </table></td>
        </tr>
      </table></td>
  </tr>
  </form>
</table>
</body>
</html>

   sheet.css：

.zi {
    font-size: 12px;
    color: #666666;
}
input{ 
    border:1px solid #D0B57D;
    font-family: "宋体";
    font-size: 9pt;
    background-color:#FBEDC8
}


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_1/

 （3）Tips

   onClick="javascript:reset()"。

   \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

   /w 字符数字下划线。

   + 一个或多个。

   expression=//

   objExp=new RegExp(expression);

   if(objExp.test(str)==true)

  document.forms[0].elements["sex"]

  charactergroup[i].checked 

   document.cookie=encodeURI("password="+document.form1.password1.value)

  document.getElementById('btnReset').addEventListener('click',function(e)){e.preventDefault();.reset()}

  type="image" src="1.gif"


2. 练习2

  （1）源代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
<title>Cookie的读取</title>
<link href="CSS/sheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript">

function submit2(){
    if(document.form1.username.value.length==0){
        alert("用户名不可为空");
        return false;
    }
    if(document.form1.password1.value.length==0){
        alert("密码不可为空");
        return false;
    }
    if(document.form1.password1.value!=document.form1.password2.value){
        alert("两次密码输入不相同");
        return false;
    }
    if(!checkemail(document.form1.mail.value)){
        alert("您输入Email地址不正确!");form1.mail.select();return false;
    }
    alert("提交成功");
    writeCookie();
    return false;
}

function writeCookie(){
    document.cookie=encodeURI("username="+document.form1.username.value);
    document.cookie=encodeURI("password="+document.form1.password1.value);
    testRadio();
}
    
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 checkemail(str){
     //在JavaScript中，正则表达式只能使用"/"开头和结束，不能使用双引号
    var Expression=/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/; 
    var objExp=new RegExp(Expression);
    if(objExp.test(str)==true){
        return true;
    }else{
        return false;
    }
}


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(cookieNum+"Cookie名称为:"+cookieName+" Cookie值为:"+cookieValue);
        }
        return false;
    }else
        alert("暂时没有Cookie，请填写信息，单击保存按钮");
        return false;
}

    
 window.addEventListener('DOMContentLoaded', function() {   
  
 document.getElementById('btnReset').addEventListener('click', function(e) {
        e.preventDefault();
        
        document.getElementById('myForm').reset(); // 调用表单自带的 reset 方法
        
    });
     
  document.getElementById('btnClose').addEventListener('click', function(e) {
        e.preventDefault();
        
        window.close(); 
    });     

});
</script>
</head>

<body>
<table width="800" height="689" border="0">
<form action="" method="post" name="form1" id="myForm">
  <tr>
    <td background="博客用户注册.jpg">
      <table width="800" height="451" border="0">
        <tr>
          <td width="113" rowspan="3">&nbsp;</td>
          <td width="491" height="140">&nbsp;</td>
          <td width="182" rowspan="3">&nbsp;</td>
        </tr>
        <tr>
          <td height="175" valign="top"><table width="100%"  border="0">
              <tr>
                <td width="30%"><div>用户名：</div></td>
                <td width="70%">
                  <div>
                    <input name="username" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>密码：</div></td>
                <td>
                  <div>
                    <input name="password1" type="password" style="font-family: Wingdings" size="20" maxlength="10" oncopy="return false" oncut="return false" onpaste="return false">
                  </div></td></tr>
              <tr>
                <td><div>重复密码：</div></td>
                <td>
                  <div>
                    <input name="password2" type="password" style="font-family: Wingdings" size="20" maxlength="10" oncopy="return false" oncut="return false" onpaste="return false">
                  </div></td></tr>
              <tr>
                <td><div>姓名：</div></td>
                <td>
                  <div>
                    <input name="realname" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>性别：</div></td>
                <td>
                  <div>
                    <input type="radio" name="sex" value="男" checked> 
                    <span>男</span>                    
                    <input type="radio" name="sex" value="女">
                    <span>                    女</span>           
                      </div></td></tr>
              <tr>
                <td><div>QQ号码：</div></td>
                <td>
                  <div>
                    <input name="qqnum" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>主页：</div></td>
                <td>
                  <div>
                    <input name="zy" type="text" size="40" maxlength="30">
                  </div></td></tr>
              <tr>
                <td><div>兴趣：</div></td>
                <td>
                  <div>
                    <input name="xq" type="text" size="40" maxlength="10">
                  </div></td></tr>
              <tr>
                <td><div>Email：</div></td>
                <td>
                  <div>
                    <input name="mail" type="text" size="40" maxlength="30">
                  </div></td></tr>
          </table></td>
        </tr>
        <tr>
          <td valign="top"><table width="100%"  border="0">
            <tr>
              <td width="33%">&nbsp;</td>
              <td width="14%"><input type="image" src="1.gif" width="51" height="20" onClick="return submit2();"></td>
              <td width="14%"><input type="image" src="2.gif" width="51" height="20" id="btnReset" onClick="javascript:reset();"></td>
              <td width="22%"><input type="image" src="3.gif" width="51" height="20"id="btnClose" onClick="javascript:window.close();"></td>
              <td width="39%"><input type="image" src="4.gif" width="65" height="20" onClick="return readCookie();"></td>
            </tr>
          </table></td>
        </tr>
      </table></td>
  </tr>
  </form>
</table>
</body>
</html>

   sheet.css：

.zi {
    font-size: 12px;
    color: #666666;
}
input{ 
    border:1px solid #D0B57D;
    font-family: "宋体";
    font-size: 9pt;
    background-color:#FBEDC8
}


 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_2/

 （3）Tips

   cookieString=decodeURI(document.cookie)

  cookieArray=cookieString.split(";")

   return

   return false


3. 练习3

  （1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title>删除Cookie</title>
<script type="text/javascript">
setCookie("test","test");//创建Cookie
alert("删除Cookie之前"+document.cookie);
deleteCookie("test");
alert("删除Cookie之后"+document.cookie);
function setCookie(name, value, expires, path, domain, secure){
    document.cookie = name + "=" + encodeURI(value) +
    ((expires) ? "; expires=" + expires : "") +
    ((path) ? "; path=" + path : "") +
    ((domain) ? "; domain=" + domain : "") +
    ((secure) ? "; secure" : "");
}
function deleteCookie(name){
var date=new Date();
alert(date.toGMTString());
alert(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
date.setTime(date.getTime()-10000); //删除一个cookie，就是将其过期时间设定为一个过去的时间
alert(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
document.cookie=name+"=删除"+"; expires="+date.toGMTString();

}
</script>
</head>

<body>
</body>
</html>

   

 （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_3/

 （3）Tips

   setCookie(name,value,expires,path,domain,secure)

   date.toGMTString()，世界标准时间。


二、编程训练

1. 训练1

 （1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="readCookie()">
    
<form name="myform">
    用户名：<input type="text" name="username">
    密码：<input type="password" name="pwd">
    <input type="button" name="sub" value="登录" onclick="login()">
</form>
    
    
<script type="text/javascript">
    function login(){
        var uname=myform.username.value;
        var pwd=myform.pwd.value;
        if(uname.length==0){
            alert("用户名不可为空");
            return false;
        }else if(uname!="mr"){
            alert("用户名不正确");
            return false;
        }else if(pwd.length==0){
            alert("密码不可为空");
            return false;
        }else if(pwd!="111"){
            alert("密码不正确");
            return false;
        }else{
            alert("登录成功");
            writeCookie();
            readCookie();
        }
    }
    function writeCookie(){
        document.cookie=encodeURI("username="+myform.username.value);
        document.cookie=encodeURI("password="+myform.pwd.value);
    }
    function readCookie(){
        var cookieString=decodeURI(document.cookie);
        var cookieArray=cookieString.split(";");
        for(var i=0;i<cookieArray.length;i++){
            var cookieNum=cookieArray[i].trim().split("=");
            if(cookieNum[0]=="username") myform.username.value=cookieNum[1];
            if(cookieNum[0]=="password") myform.pwd.value=cookieNum[1];
        }
    }

</script>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_4/

  （3）Tips

     比较好理解，很规律。

    cookieString=decodeURI(document.cookie)。


2. 训练2

 （1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form name="myform">
    用户名：<input type="text" name="username">
    密码：<input type="password" name="pwd">
    <input type="button" name="sub" value="登录" onclick="login()">
    <a href="javascript:del('username')">清除记录</a>
</form>
<script type="text/javascript">
    function login(){
        var uname=myform.username.value;
        var pwd=myform.pwd.value;
        if(uname.length==0){
            alert("用户名不可为空");
            return false;
        }else if(uname!="mr"){
            alert("用户名不正确");
            return false;
        }else if(pwd.length==0){
            alert("密码不可为空");
            return false;
        }else if(pwd!="111"){
            alert("密码不正确");
            return false;
        }else{
            alert("登录成功");
            writeCookie("username",uname);
        }
    }
    function writeCookie(name,value){
        document.cookie=encodeURI(name+"="+value);
    }
    
    function readCookie(name){
        var cookieString=decodeURI(document.cookie);
        var cookieArray=cookieString.split("; ");
        for(var i=0;i<cookieArray.length;i++){
            var cookieNum=cookieArray[i].split("=");
            if(cookieNum[0]==name) return cookieNum[1];
        }
        
    }
    
    function del(name){
        var date=new Date();
        date.setTime(date.getTime()-1);
        document.cookie=name+"=清除; expires="+date.toGMTString();
        myform.username.value="";
    }
     document.cookie=encodeURI("username=mr");
    myform.username.value=readCookie('username');
    alert(readCookie('username'));

</script>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_5/

  （3）Tips

    设置了cookie才能读取。


三、实践与练习

1. 实践1

 （1）源代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="checkCookie()">
    
<script type="text/javascript">
    window.addEventListener('DOMContentLoaded',function(){
        document.cookie="username=abcd";
        checkCookie();
    
    });
    
    function checkCookie(){
        var user=getCookie("username");
        if (user!=""){
            alert("亲爱的"+ user +"，欢迎您再次访问");
        } else {
            user = prompt("请输入名字:","");
            if (user!="" && user!=null){
                setCookie("username",user,10);
                alert(document.cookie);
            }
        }
    }
    
    function setCookie(cname,cvalue,exminutes){
        var date = new Date();
        date.setMinutes(date.getMinutes()+exminutes);
        var expires = "expires="+date.toGMTString();
        document.cookie = cname+"="+cvalue+"; "+expires;
    }
    
    function getCookie(cname){
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var cArr=ca[i].split("=");
            if (cArr[0]==cname) { return cArr[1]; }
        }
        return "";
    }
    
</script>
<form>

</form>
</body>
</html>

  （2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_6/

  （3）Tips

    先写入一个cookie。

    document.cookie="";

    user=promt("请输入名字：","");

    expires=date.toGMTString()；

    date.setMuinutes(date.getMinutes()+exminutes)；

    

2. 实践2

 （1）源代码

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>


<table width="30%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td width="46%">商品名称</td>
        <td width="14%">单价</td>
        <td width="20%">数量</td>
        <td width="20%">操作</td>
    </tr>
    <tr>
        <td>JavaScript从入门到精通</td>
        <td>50</td>
        <td><input type="text" id="sl1" size="4" value="1" maxlength="5" ></td>
        <td><a href="javascript:;" onClick="cart_add('goods1','JavaScript从入门到精通',sl1.value,'50')">添加</a></td>
    </tr>
    <tr>
        <td>联想笔记本电脑</td>
        <td>3600</td>
        <td><input type="text" id="sl2" size="4" value="1" maxlength="5" ></td>
        <td><a href="javascript:;" onClick="cart_add('goods2','联想笔记本电脑',sl2.value,'3600')">添加</a></td>
    </tr>
</table>

<script type="text/javascript">
    //添加商品至购物车
    function cart_add(item_no,item_name,item_amount,item_price){
        var cookieString=document.cookie;
        if(isNaN(item_amount)||item_amount<1||item_amount.indexOf('.')!=-1){
            alert("数量输入错误！");
        }else{
            var mer_list=cart_read('petInfo');
            var today = new Date();
            var expires = new Date();
            expires.setTime(today.getTime() + 1000*60*60);     //有效期为1个小时
            var item_detail="|"+item_no+"&"+item_name+"&"+item_amount+"&"+item_price;
            if(mer_list==false){
                 document.cookie="petInfo="+escape(item_detail);
                alert(document.cookie);
                 document.cookie="expires=" + expires.toGMTString();
                alert(document.cookie);
                 document.cookie="path=/";
                alert(document.cookie);
                
                //document.cookie="petInfo="+escape(item_detail)+";expires=" + expires.toGMTString()+ "; path=/";
        
            }else{
                  document.cookie="petInfo="+mer_list+escape(item_detail);
                alert(document.cookie);
                 document.cookie="expires=" + expires.toGMTString();
                alert(document.cookie);
                 document.cookie="path=/";
                alert(document.cookie);              
                
                //document.cookie="petInfo="+mer_list+escape(item_detail)+"; expires=" + expires.toGMTString()+ "; path=/";
      
                
            }
            
            alert("“"+item_name+"”\n"+"已经加入您的订单！");
            alert(document.cookie);
            alert(item_detail);
            
            window.location.href="cart.html";
        }
    }
    
    function cart_read(cookieName){
        var search = cookieName + "=";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search);
            if (offset != -1) {
                offset += search.length;
                end = document.cookie.indexOf(";", offset);
                if (end == -1){end = document.cookie.length;}
               return unescape(document.cookie.substring(offset, end));
                
            }else{
                return false;
            }
        }else{
            return false;
        }
    }

</script>    
    
    
</body>
</html>

  cart.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
<script type="text/javascript">
    
    var the_list =unescape(cart_read('petInfo'));
    var totals;
    var broken_list = the_list.split("|");
    for (i=1;i<broken_list.length;i++){
        var single_list=broken_list[i];
        var broken_single_list = single_list.split("&");
        var subtotals=Math.round(broken_single_list[2]*broken_single_list[3]*100)/100; //小计
        if (totals==null){
            totals=subtotals;
        }else{
            totals=Math.round(totals*100+subtotals*100)/100;
            
        }
        
        document.write("<table id='Table"+broken_single_list[0]+"' width='30%' border='1' cellspacing='0' cellpadding='0' bordercolor='#FFFFFF' bordercolordark='#FFFFFF' bordercolorlight='#FB9914'>")
        document.write("<tr>");
        document.write("<td width='46%'>"+broken_single_list[1]+"</td>");
        document.write("<td width='14%'>"+broken_single_list[3]+"</td>");
        document.write("<td width='12%'>"+broken_single_list[2]+"</td>");
        document.write("<td width='20%'><input type='text' size='10' id='id"+broken_single_list[0]+"'style='border:medium none; '  readonly value="+subtotals+"></td>");
        document.write("</tr><tr><td >合计</td><td colspan='3'>"+totals+"</td></tr></table>");
    }
    
    function cart_read(cookieName){
        var search = cookieName + "=";
        if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search);
            if (offset != -1) {
                offset += search.length;
                end = document.cookie.indexOf(";", offset);
                if (end == -1){end = document.cookie.length;}
               return unescape(document.cookie.substring(offset, end));
                    
                
                
        
            }else{
                return false;
            }
        }else{
            return false;
        }
    }
    
    
    
    
</script>


</body>
</html>


（2）运行页面

    https://www.xinyizhishu.top/jsC/sc/15_7/

  （3）Tips

   cart，手推车。

   amount，总计。

   isNaN(item_amount)

   item_amount.indexOf('.')=-1

   expires.setTime(today.getTime()+1000*60*60)

   escape(item_detail)

   window.loacation.href

   你妈个蛋expires根本写不到cookie里，不显示，漏洞百出，浪费一上午时间！

   百折不挠，单独写就能加进去了。









JS入门到精通 第14章 表单对象 JS入门到精通 第16章 图像处理

相关内容

更多

游客 回复需填写必要信息
↑