练习一:修改 cookietest.html 和 cookietest2.html 的代码,把多个值写到一个 cookie,然后在读取 cookie 时再分解这些值,并且把它们显示在单独的行里。使用 “#” 作为定界符。
练习二:在 cookietest2.html 里添加一个按钮,删除在 cookietest.html 里设置的 cookie,并且查看删除的效果。(提示:让按钮调用deleteCookie()。)
这里列出原代码,方便对照。
程序清单 10.3 “cookies.js”
代码内容如下:
function createCookie(name,value,days,path,domain,secure){ if(days){ var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = date.toGMTString(); } else var expires = ""; cookieString = name + "=" + escape(value); if(expires)cookieString += ";expires=" + escape(expires); if(path)cookieString += ";path=" + escape(path); if(domain)cookieString += ";domain" + escape(domain); if(secure) cookieString += ";secure" +escape(secure); document.cookie = cookieString; } function getCookie(name){ var nameEquals = name + "="; var crumbs = document.cookie.split(";"); for(var i = 0;i < crumbs.length ;i++){ var crumb = crumbs[i]; if(crumb.indexOf(nameEquals) == 0){ return unescape(crumb.substring(nameEquals.length,crumb.length)); } } return null; } function deleteCookie(name){ createCookie(name,"",-1); }
程序清单 10.4 “cookietest.html”
代码内容如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Cookie Testing</title> <script src = "cookies.js"></script> <script> window.onload = function () { var cookieValue = prompt("输入 Cookie 多个值,以“#”为定界符:"); createCookie("myCookieData",cookieValue); } </script> </head> <body> <a href = "cookietest2.html">进入 Cookie 测试页 2 --></a> </body> </html>
程序清单 10.5 “cookietest2.html”
代码内容如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Cookie Testing</title> <script src = "cookies.js"></script> <script> window.onload = function () { document.getElementById("output").innerHTML = "你设置的 Cookie 值为:" + getCookie("myCookieData") ; } </script> </head> <body> <a href="cookietest.html"> <-- 返回 Cookie 测试页 1 </a> <div id="output"></div> </body> </html>
在这一章节里,程序清单 10.3 “cookies.js” 、程序清单 10.4 “cookietest.html” 的代码内容不需要修改,完成 练习一、二 只需修改程序清单 10.5 “cookietest2.html”即可。
练习一:修改 cookietest.html 和 cookietest2.html 的代码,把多个值写到一个 cookie,然后在读取 cookie 时再分解这些值,并且把它们显示在单独的行里。使用 “#” 作为定界符。
解题代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Cookie Testing</title> <script src = "cookies.js"></script> <script> window.onload = function () { var out = "<br/>"; var multiValue = getCookie("myCookieData"); var myArray = multiValue.split("#"); for(var i = 0;i < myArray.length ; i++){ out += myArray[i] + "<br/>"; } document.getElementById("output").innerHTML = "你设置的 Cookie 值为:" + out ; } </script> </head> <body> <a href="cookietest.html"> <-- 返回 Cookie 测试页 1 </a> <div id="output"></div> </body> </html>
练习二:在 cookietest2.html 里添加一个按钮,删除在 cookietest.html 里设置的 cookie,并且查看删除的效果。(提示:让按钮调用deleteCookie()。)
解题代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Cookie Testing</title> <script src = "cookies.js"></script> <script> window.onload = function () { var out = "<br/>"; var multiValue = getCookie("myCookieData"); var myArray = multiValue.split("#"); for(var i = 0;i < myArray.length ; i++){ out += myArray[i] + "<br/>"; } document.getElementById("output").innerHTML = "你设置的 Cookie 值为:" + out ; <!--方法二:使用DOM 0级处理方式加入事件 特点:事件直接加入匿名函数,只能添加一个事件处理,当存在多个操作同id时会覆盖替换--> // document.getElementById("deleteCookie").onclick = function(){deleteCookie("myCookieData");} <!--方法三:使用DOM 2级处理方式加入事件 特点:插入句柄,能对一个对象操作添加多个处理事件--> // document.getElementById("deleteCookie").addEventListener("click",function(){deleteCookie("myCookieData")}); } </script> </head> <body> <a href="cookietest.html"> <-- 返回 Cookie 测试页 1 </a> <div id="output"></div> <!--方法一:使用DOM HTML标签方式直接插入事件 特点:内联方式,在HTML标签中加入处理事件,标签与事件混在一起--> <input id="deleteCookie" οnclick="deleteCookie('myCookieData')" type="button" value="清除 Cookie 测试页 1 的 Cookies" /> <!--方法二、方法三的按钮代码--> <!--<input id="deleteCookie" type="button" value="清除 Cookie 测试页 1 的 Cookies" />--> </body> </html>