笔记练习：《Javascript入门经典（第5版）》page126_10.12_Practice

最新推荐文章于 2023-10-24 22:05:07 发布

不思议命运

最新推荐文章于 2023-10-24 22:05:07 发布

阅读量623

点赞数 1

分类专栏： javascript 文章标签： javascript cookie

本文链接：https://blog.csdn.net/nd_rrew/article/details/51111553

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

练习一：修改 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”即可。

解题代码如下：

<!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>

不思议命运

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
笔记练习：《Javascript入门经典（第5版）》page126_10.12_Practice

练习一：修改 cookietest.html 和 cookietest2.html 的代码，把多个值写到一个 cookie，然后在读取 cookie 时再分解这些值，并且把它们显示在单独的行里。使用 “#” 作为定界符。练习二：在 cookietest2.html 里添加一个按钮，删除在 cookietest.html 里设置的 cookie，并且查看删除的效果。（提示：让按钮调用de
复制链接

扫一扫