二十一天学通JavaScript:cookie的编码

来源:互联网 发布:网络直播摄像头 斗鱼 编辑:程序博客网 时间:2024/05/01 22:38
二十一天学通JavaScript:cookie的编码

本文节选自《21天学通JavaScript》一书
    cookie都是使用未编码的格式存入在cookie文件中的。但是在cookie中是不允许包含空格、分号、逗号等特殊符号的。如果要将这些特殊符号也写入cookie中,那就必须在写入cookie之前,先将cookie用escape编码,再在读取cookie时通过unescape函数将其还原。
【范例14-4】对cookie进行编码和解码,尝试在cookie中加入一些特殊的字符。如示例代码14-4所示。
示例代码14-4
01    <head>
02    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
03    <title>cookie编码解码</title>                <!-- -文档的标题->
04    <script language="javascript">                //JavaScript程序
05    function SetCookie(name,value)                //自定义函数
06    {
07        window.document.cookie= name + "=" + escape(value)+";";                                                                // 设置cookie
08        alert("设置成功!");
09     }
10    function GetCookie(cookieName,codeFind)     //自定义函数
11    {
12        var cookieString = document.cookie;    //获取cookie
13        var start = cookieString.indexOf(cookieName + '=');                                                                    //截取cookie的名
14        if (start == -1)                         //若不存在该名字的 cookie
15        return null;                            //返回空值
16        start += cookieName.length + 1;                    
17        var end = cookieString.indexOf(';', start);                                                                            //取得cookie的值
18        if(codeFind==1)                        //当用户以解码的方式查看时执行if语句
19        {
20            if (end == -1)                    //防止最后没有加“;”冒号的情况
21            return unescape(cookieString.substring(start));                                                                    //返回编码后的值
22            return unescape(cookieString.substring(start, end));                                                                //返回编码后的值
23        }
24        else
25        {
26            // 当用户以非解码的方式查看时,执行以下三句代码
27            if (end == -1)                    //防止最后没有加“;”冒号的情况
28            return cookieString.substring(start);                                                                            //返回cookie值
29            return cookieString.substring(start, end);                                                                        //返回cookie值
30        }
31    }
32    function setValue()                        //一个自定义函数
33    {
34         if(Name.value!="")                    //当输入文本不为空时
35        {
36            // 当用户输入信息不为空时,获取输入的信息并调用函数设置cookie
37            SetCookie(Name.value,Value.value);
38            Value.value="";                    //将文本框清空
39            Name.value="";                    //将姓名的文本框清空
40        }
41        else
42        {
43        // 当用户输入变量名为空时,提示用户输入不正确的信息
44    alert("设置失败,cookie的名不能为空!")        //提示用户设置失败
45        }
46    }
47    function getValue(n)                        //自定义构造一个函数
48    {
49        if(Name.value=="")                    //文本为空
50        {
51            alert("你没有输入要查找的cookie名");    //检查输入是否为空
52        }
53        else
54        {
55            var str=GetCookie(Name.value,n);    // 查询的值不为空时,调用查询的函数
56            if(str!="")
57            {
58                Value.value=str;                //取得查询的结果
59            }
60            else
61            {
62                Value.value="该值为空!";        //结果为空时提示客户
63            }
64        }
65    }
66    </script>
67    </head>
68    <body>    
69    <label>
70    cookie名:    
71    <input type="text" name="Name" />            <!-输入cookie的文本框-->
72    </label>                                    <!-标签的结束-->
73    <label> <br />                            <!-换行-->
74    <br />                                    <!-换行-->
75    cookie值:
76    <input type="text" name="Value" />            <!- cookie值的文本框-->
77    </label>                                    <!-标签的结束-->
78    <p>
79      <label>                                    <!-设置cookie的按钮-->
80      <input type="submit" name="Submit" value="设置cookie"  onclick="setValue ()"/>
81      </label>
82      <label>                                    <!-查询cookie的按钮-->
83          <input type="submit" name="Submit2" value="查询cookie" onclick="getValue (1)" />
84      </label>
85      <label>                                    <!-以非解码的方式查看-->
86          <input type="submit" name="Submit3" value="非解码查询"  onclick="getValue (0)"/>
87      </label>
88    </p>
89    </body>
【运行结果】打开网页文件运行程序。
【代码解析】该代码段第5~9行是设置cookie的过程。这里只用了一个参数。代码第10~31行是读取cookie的过程。主要是利用“;”和“=”将cookie的键与值分开,并找到所要的结果。
警告:如果cookie里有特殊字符,则一定要经过编码和译码。
 

原创粉丝点击