`
micheal19840929
  • 浏览: 161937 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Cookie之二

    博客分类：
  • J2EE
JavaScriptHTML浏览器 
阅读更多

17.2  存取Cookie

创建Cookie的方式与定义一个变量的方式有些类似，都必须使用Cookie名和Cookie值。同一个网站可以创建多个Cookie，而多个Cookie可以存放在同一个Cookie文件中。使用Document对象的cookie属性可以设置一个Cookie，也可以从一个Cookie文件中读取所有的Cookie内容。

17.2.1  存取Cookie的方法

在JavaScript中存取Cookie时，必须要使用Document对象的cookie属性。创建或修改一个Cookie的语法代码如下所示：

document.cookie = "name=value"

在以上代码中，name为Cookie名，value为Cookie值。如果要创建多个Cookie，可以多次使用以上代码。使用Document对象的cookie属性，也可以读取Cookie文件中的Cookie信息。如以下代码所示：

var cookies = document.cookie

在以上代码中，cookies为变量名，document.cookie可以取得整个Cookie文件中的信息，因此，变量cookies有可能会包括多个Cookie的信息。

17.2.2  创建与读取Cookie

使用Document对象的cookie属性可以创建和读取Cookie。其具体实现方法如代码清单17-1所示，请注意加粗的文字。

代码清单17-1  创建与读取Cookie

<html>

    <head>

        <title>创建与读取Cookie</title>

        <meta http-equiv="content-type" content="text/html;charset=gb2312">

        <script language="javascript" type="text/javascript">

            <!--

                //设置Cookie

                function setCookie()

                {

                    var userName = myForm.myName.value;

                    var userPassword = myForm.myPassword.value;

                    //添加或修改第一个Cookie，该Cookie名为cookieUserName，值
                    //为“姓名”文本框中的内容

                    document.cookie = "cookieUserName="+userName;

                    //添加或修改第二个Cookie，该Cookie名为cookieUserPassword，
                    //值为密码框中的内容

                    document.cookie = "cookieUserPassword="+userPassword;

                }

                //读取Cookie

                function getCookie()

                {

                    //获得Cookie文件中的信息

                    var cookieMesaage = document.cookie;

                    alert(cookieMesaage);

                }

            -->

        </script>

    </head>

    <body>

        <form name="myForm">

            姓名：<input type="text" name="myName"><br>

            密码：<input type="password" name="myPassword"><br>

            <input type="button" value="设置Cookie" onclick="setCookie()">

            <input type="button" value="读取Cookie" onclick="getCookie()">

        </form>

    </body>

</html>

 上述代码为光盘目录里“代码\第17章\sample01.htm”的内容，本例的关键知识点如下所示：

（1）创建了一个文本框，一个密码框和两个按钮。

（2）单击【设置Cookie】按钮时，调用setCookie()函数。在该函数中，先获取文本框和密码框中的文字，然后使用以下代码添加一个Cookie。

document.cookie = "cookieUserName="+userName;

在以上代码中，Cookie名为“cookieUserName”，Cookie值为文本框中的内容。

（3）然后使用以下代码创建另一个Cookie，该Cookie名为“cookieUserPassword”，值为密码框中的内容。

document.cookie = "cookieUserPassword="+userPassword;

（4）单击【读取Cookie】按钮时，调用getCookie()函数。在该函数中，使用以下代码获取Cookie文件中的所有信息。

var cookieMesaage = document.cookie;

（5）然后使用alert()方法，将变量cookieMesaage的值输出，如图17-1所示。从图17-1中可以看出，Cookie文件中记录了两个Cookie的名称和值。

 

图17-1  sample01.htm的运行结果

在默认情况下，只要打开sample01.htm文件的浏览器窗口还没有关闭时，Cookie就会一直存在，同一网站上的其他网页也可以读取该Cookie。代码清单17-2就是一段读取Cookie内容的代码，请注意加粗的文字。

代码清单17-2  读取Cookie

<html>

    <head>

        <title>读取Cookie</title>

        <meta http-equiv="content-type" content="text/html;charset=gb2312">

        <script language="javascript" type="text/javascript">

            <!--

                var cookieMesaage = document.cookie;

                if (cookieMesaage=="")

                {

                    document.write("没有获得Cookie值，请确认sample01.htm文
                    件是否打开");

                }

                else

                {

                    document.write("Cookie文件中的内容为：<br>",cookie-
                    Mesaage);

                }

            -->

        </script>

    </head>

    <body>

    </body>

</html>

 上述代码为光盘目录里“代码\第17章\sample02.htm”的内容。如果打开sample01.htm的浏览器窗口而且还没有关闭，那么该文件可以读取sample01.htm文件所创建的Cookie，如图17-2所示。如果打开sample01.htm的浏览器窗口已经关闭，则该文件读取的Cookie内容为空，那么运行该文件的结果如图17-3所示。

 

图17-2  没有关闭sample01.htm窗口时的运行结果

 

图17-3  关闭sample01.htm窗口时的运行结果

17.2.3  精确读取Cookie值

从上例中可以看出，使用document.cookie获得的是整个Cookie文件中的内容，因此，很有可能会包括多个Cookie的内容。如果要精确获取某个Cookie的值，就必须要使用String对象中的一些方法。在图17-2中，整个Cookie文件中的内容如下所示：

cookieUserName=张三; cookieUserPassword=123456

以上内容包括了cookieUserName和cookieUserPassword两个Cookie的名和值，如果要获得其中一个Cookie的值，具体实现步骤如下所示：

（1）使用document.cookie获得整个Cookie文件的内容。

（2）如果要获得某个Cookie的值，可以使用String对象的substring()方法来截取该Cookie值的某一部分。以cookieUserName为例，就必须要截取从“张三”开始到“；”为止这部分的子字符串。

（3）要获得某个指定的Cookie值，就必须要获得Cookie值的开始和结束位置。由于Cookie值是不固定的，而Cookie名是固定的，所以可以先获得Cookie名的开始位置，以cookieUserName为例，就必须要获得子字符串“cookieUserName=”在整个字符串的位置。之所以要加上“=”，是为了防止某个Cookie的值中正好包含了“cookieUserName”字符串。

（4）获得了Cookie名的开始位置之后，可以通过Cookie名的开始位置加上Cookie名的长度再加上1（即加上了“=”的位置）的方法来获得Cookie值的开始位置。

（5）获得了Cookie值的开始位置之后，还必须要知道Cookie值的结束位置才可以使用String对象的substring()方法来截取Cookie值。

（6）获得Cookie值的结束位置有两种情况：

第一种情况是该Cookie值之后还有Cookie，那么就要从该Cookie值的开始位置查找，第一个“;”出现的位置就是Cookie值的结束位置。

第二种情况是该Cookie值之后没有其他Cookie了，那么该Cookie值的结束位置也就是整个Cookie内容的最后位置，可以通过Cookie内容的长度来获得该结束位置。

（7）最后使用String对象的substring()方法来获得Cookie的值。

代码清单17-3显示了如何精确读取Cookie的值，请注意加粗的文字。

代码清单17-3  精确读取Cookie值

<html>

    <head>

        <title>精确读取Cookie值</title>

        <meta http-equiv="content-type" content="text/html;charset=gb2312">

        <script language="javascript" type="text/javascript">

            <!--

                //设置Cookie

                function setCookie()

                {

                    var userName = myForm.myName.value;

                    var userPassword = myForm.myPassword.value;

                    //添加或修改第一个Cookie，该Cookie名为cookieUserName，值
                    //为“姓名”文本框中的内容

                    document.cookie = "cookieUserName="+userName;

                    //添加或修改第二个Cookie，该Cookie名为cookieUserPassword，
                    //值为密码框中的内容

                    document.cookie = "cookieUserPassword="+userPassword;

                }

                

                function getCookie(cookieName)

                {

                    //获得Cookie文件中的信息

                    var cookieMesaage = document.cookie;

                    var cookieValue = "";

                    //获得Cookie值

                    if (cookieName=="myName")

                    {

                        cookieValue = returnCookieValue(cookieMesaage, 
                        "cookieUserName")

                        alert("姓名为："+cookieValue);

                    }

                    else if (cookieName=="myPassword")

                    {

                        cookieValue = returnCookieValue(cookieMesaage, 
                        "cookieUserPassword")

                        alert("密码为："+cookieValue);

                    }

                }

                

                //该函数用于返回某个Cookie的值

                //cookieValue为整个Cookie文件的内容

                //cookieName为要获得值的Cookie名

                function returnCookieValue(cookieValue,cookieName)

                {

                    //设置返回值

                    var returnCookieValue = "";

                    //查找Cookie名在整个Cookie文件内容中的位置

                    var cookieNameIndex = cookieValue.indexOf(cookie- 
                    Name+"=");

                    

                    //如果在Cookie文件内容中找到Cookie名，则进一步查找该Cookie
                    //的值

                    if (cookieNameIndex!=-1)

                    {

                        //查找Cookie值在Cookie文件内容中的位置。

                        //该位置为Cookie名的位置加上Cookie名的长度，再加上“=”
                        //号的长度，即1

                        var cookieValueBeginIndex = cookieNameIndex + 
                        cookieName.length + 1;

                        //查找Cookie值在Cookie文件内容中的位置。

                        //该位置为从Cookie名的位置开始到第一个“;”为止

                        var cookieVlaueEndIndex = cookieValue.indexOf(";", 
                        cookieValueBeginIndex);

                        

                        //如果从Cookie名的位置开始到整个Cookie文件内容的最后都
                        //没有找到“;”，那么Cookie值的结束位置就是整个Cookie
                        //内容的最后

                        if (cookieVlaueEndIndex==-1)

                        {

                            cookieVlaueEndIndex = cookieValue.length;

                        }

                        //通过Cookie值的开始位置和结束位置获得Cookie值

                        returnCookieValue = cookieValue.substring 
                        (cookieValueBeginIndex,cookieVlaueEndIndex);

                    }

                    //返回Cookie值

                    return returnCookieValue;

                }

            -->

        </script>

    </head>

    <body>

        <form name="myForm">

            姓名：<input type="text" name="myName"><br>

            密码：<input type="password" name="myPassword"><br>

            <input type="button" value="设置Cookie" onclick="setCookie()" 
            ><br>

            <input type="button" value="读取Cookie中的姓名" onclick= 
            "getCookie('myName')">

            <input type="button" value="读取Cookie中的密码" onclick= 
            "getCookie('myPassword')">

        </form>

    </body>

</html>

 

上述代码为光盘目录里“代码\第17章\sample03.htm”的内容。本例修改了代码清单17-1中的代码，添加了两个按钮，单击这两个按钮可以获得不同的Cookie的值。如图17-4为单击【读取Cookie中的姓名】按钮后的结果。

 

图17-4  sample03.htm的运行结果

17.2.4  通过数组来读取Cookie值

除了使用17.2.3小节中的方法读取Cookie值之外，还可以使用数组的方法来读取Cookie值。再看一下在图17-2中，整个Cookie文件中的内容如下所示：

cookieUserName=张三; cookieUserPassword=123456

从以上代码中可以看出，一个Cookie文件中，将不同的Cookie使用“; ”号作为分隔符进行分隔（分号后还有一个空格）。而每个Cookie中，使用“=”作为分隔符，“=”左侧是Cookie名，“=”右侧是Cookie值。那么通过String对象的split()方法，可以很容易将以上代码分割成数组，分割需要分两步进行，步骤如下所示：

（1）使用split(“;”)将整个Cookie内容分割成一个数组，该数组中每个元素都是一个Cookie（包括Cookie名、“=”号、Cookie值）。经过这一步可以得到的数组如下所示：

Arr[0] = "cookieUserName=张三"

Arr[1] = "cookieUserPassword=123456"

（2）从以上代码中可以看出，数组中的每一个元素都包括了Cookie名和Cookie值，这种格式并不利于Cookie值的查询，因此，还需要对Arr[]数组中的每一个元素进行分割。这次分割可以使用split(“=”)方法。然后得到一个二维数组，如以下代码所示：

myArr[0][0] = "cookieUserName"
myArr[0][1] = "张三"
myArr[1][0] = "cookieUserPassword"
myArr[1][1] = "123456"

 

最后，可能通过循环来判断myArr[i][0]的值是否与Cookie名的值相同，如果相同，那么myArr[i][1]的值就是Cookie的值。其具体实现过程如代码清单17-4所示，请注意加粗的文字。

代码清单17-4  精确读取Cookie值

<html>

    <head>

        <title>精确读取Cookie值</title>

        <meta http-equiv="content-type" content="text/html;charset=gb2312">

        <script language="javascript" type="text/javascript">

            <!--

                //设置Cookie

                function setCookie()

                {

                    var userName = myForm.myName.value;

                    var userPassword = myForm.myPassword.value;

                    //添加或修改第一个Cookie，该Cookie名为cookieUserName，值
                    //为“姓名”文本框中的内容

                    document.cookie = "cookieUserName="+userName;

                    //添加或修改第二个Cookie，该Cookie名为cookieUserPassword，
                    //值为密码框中的内容

                    document.cookie = "cookieUserPassword="+userPassword;

                }

                

                function getCookie(cookieName)

                {

                    //获得Cookie文件中的信息

                    var cookieMesaage = document.cookie;

                    var cookieValue = "";

                    //获得Cookie值

                    if (cookieName=="myName")

                    {

                        cookieValue = returnCookieValue(cookieMesaage, 
                        "cookieUserName")

                        alert("姓名为："+cookieValue);

                    }

                    else if (cookieName=="myPassword")

                    {

                        cookieValue = returnCookieValue(cookieMesaage, 
                        "cookieUserPassword")

                        alert("密码为："+cookieValue);

                    }

                }

                

                //该函数用于返回某个Cookie的值

                //cookieValue为整个Cookie文件的内容

                //cookieName为要获得值的Cookie名

                function returnCookieValue(cookieValue,cookieName)

                {

                    var returnCookieValue = "";

                    //使用“; ”作为分隔符将整个Cookie内容分隔成数组，此时数组中
                    //的每个元素都是由一个Cookie名、等于号和Cookie值组成的字符串

                    var cookies = cookieValue.split("; ");

                    //定义一个数组，用于存放Cookie名和Cookie值

                    var cookiesValue = new Array();

                    

                    //通过循环将Cookie名和Cookie值放在数组中

                    for (var i=0;i<cookies.length;i++)

                    {

                        //将数组cookies中的每一个元素都分割成数组，此时数组的第
                        //一个元素为Cookie名，第二个元素为Cookie值

                        var tempArr = cookies[i].split("=");

                        //将数组作为元素放在cookiesValue数组中

                        cookiesValue[i] = tempArr;

                    }

                    

                    //通过循环查找Cookie名和Cookie值

                    for (var i=0;i<cookiesValue.length;i++)

                    {

                        //如果数组中的第一个元素值与Cookie名相同，那么数组中的第
                        //二个元素值为Cookie值

                        if (cookiesValue[i][0]==cookieName)

                        {

                            returnCookieValue = cookiesValue[i][1];

                            break;

                        }

                    }

                    return returnCookieValue;

                }

            -->

        </script>

    </head>

    <body>

        <form name="myForm">

            姓名：<input type="text" name="myName"><br>

            密码：<input type="password" name="myPassword"><br>

            <input type="button" value="设置Cookie" onclick="setCookie()" 
            ><br>

            <input type="button" value="读取Cookie中的姓名" onclick= 
            "getCookie('myName')">

            <input type="button" value="读取Cookie中的密码" onclick= 
            "getCookie('myPassword')">

        </form>

    </body>

</html>

 上述代码为光盘目录里“代码\第17章\sample04.htm”的内容。本例修改了代码清单17-3中的代码，使用数组的方式来精确读取Cookie的值，其运行结果与sample03.htm的运行结果相同，读者也可以自己运行该文件查看效果。

分享到：
| Cookie之一
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics