JavaScript 基礎知識 - BOM篇

時間 2019-11-08

標籤 javascript 基礎知識 bom 欄目 JavaScript 简体版

原文原文鏈接

前言

本篇文章是JavaScript基礎知識的BOM篇，若是前面的《JavaScript基礎知識-DOM篇》看完了，如今就能夠學習BOM了。javascript

注意： 全部的案例都在這裏連接: 提取密碼密碼: yvxo，文章中的每一個案例後面都有對應的序號。html

1. BOM 基本概念

BOM(Browser Object Model)：瀏覽器對象模型，提供了一套操做瀏覽器的工具。

BOM中包含的內容不少，可是有不少東西是用不到的。在BOM中咱們須要掌握定時器。java

2. window 對象

window對象是一個全局對象，也能夠說是JavaScript中的頂級對象
像document、alert()、console.log()這些都是window的屬性，其實BOM中基本全部的屬性和方法都是屬性window的。
全部定義在全局做用域中的變量、函數都會變成window對象的屬性和方法
window對象下的屬性和方法調用的時候能夠省略window

示例代碼： [01-window對象.html]web

普通函數調用的時候：segmentfault

var name = "項羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 沒有 new 的時候就至關於普通函數調用
var obj = Teacher(); // 打印的this 指的是全局對象window
console.log(name);   // 虞姬
console.log(age);    // 22
/* 
爲何會是 虞姬 和 22 ？ 不是定義了一個全局變量name = "項羽"嗎？
由於 Teacher做爲一個普通函數調用，它裏面的this指的就是全局對象
js 代碼一步步往下執行，一開始是定義了一個name="項羽"的全局變量，
可是下面的this有將"虞姬"指向了全局對象，因此最後打印的是虞姬 22
*/

構造函數的時候：瀏覽器

var name = "項羽";
var age = "28";

function Teacher() {
    this.name = "虞姬";
    this.age = 22;
    console.log(this);
}
// 沒有 new 的時候就至關於普通函數調用
var obj = new Teacher(); // 打印的this 指的是構造函數對象 Teacher
console.log(name); // 項羽
console.log(age); // 28
/*
Teacher做爲構造函數的時候，它內部的this指向的是 對象Teacher
此時的全局變量name="項羽" 將不會再受this的影響，因此，打印的是 項羽 28
*/

2.1 window.onload

window.onload事件會在窗體加載完成後執行，一般咱們稱之爲 入口函數。

window.onload = function(){
    //裏面的代碼會在窗體加載完成後執行。
    //窗體加載完成包括文檔樹的加載、還有圖片、文件的加載完成。
}

注意：服務器

若是有圖片加載，那麼代碼必定要寫到window.onload裏面，不然會出現圖片沒有加載完成，獲取到的寬度和高度不對的狀況。
瀏覽器會對頁面的加載作優化，在加載圖片的時候，圖片的引入會延遲。
一個頁面中不能有兩個onload函數，寫在下面的會覆蓋掉上面的。

示例代碼： [02-window.onload對象(一)]cookie

爲何下面的代碼會報錯呢？網絡

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.onload</title>
    <!-- script寫在上面直接報錯 -->
    <!--  
        由於代碼是一步步向下執行的，在head裏的script獲取btn或者box的時候，
        是獲取不到的，由於下面的頁面結構還沒加載到：
    -->
    <script>
        var btn = document.getElementById('btn');
        var box = document.getElementById('box');
        btn.onclick = function() {
            box.style.width = "500px";
            box.style.height = "500px";
        }
    </script>
</head>

<body>
    <button id="btn">按鈕</button>
    <div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>

</html>

此時就能夠用window.onload入口函數：app

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>window.onload</title>
    
    <script>
    // 這裏定義了一個入口函數，就是說等頁面全部文檔樹加載完纔會執行這裏面的代碼：
        window.onload = function() {
            var btn = document.getElementById('btn');
            var box = document.getElementById('box');
            btn.onclick = function() {
                box.style.width = "500px";
                box.style.height = "500px";
            }
        }
    </script>
</head>

<body>
    <button id="btn">按鈕</button>
    <div id="box" style="width:200px;height:200px;background:pink;"></div>
</body>

</html>

示例代碼：圖片加載 [03-window.onload對象(二)]

爲何獲取的寬度和高度都爲0呢，js代碼不是寫在最後面了嗎？

<body>
    <!-- html 部分-->
    <img id="img" src="../image/levi.jpg" alt="">

    <!-- js 部分 -->
    <script>
        var img = document.getElementById('img');
        console.log(img.width);     // 0
        console.log(img.height);    // 0
    </script>
</body>

效果圖：

這是由於，瀏覽器會對頁面的加載作優化，在加載圖片的時候，圖片的引入會延遲。這時候須要用window.onload：

<head>
    <script>
    // 當文檔加載完成的時候執行，若是有圖片，等到圖片也加載完成纔會執行。
        window.onload = function() {
            var img = document.getElementById('img');
            console.log(img.width);
            console.log(img.height);
        }
    </script>
</head>

<body>
    <img id="img" src="../image/levi.jpg" alt="">
</body>

效果圖：

2.2 window.open

window.open() 打開一個窗口

語法：window.open(url, [name], [features]);

參數1：須要載入的url地址
參數2：新窗口的名稱
       _self:在當前窗口打開
       _blank:在新的窗口打開
參數3：窗口的屬性，指定窗口的大小
返回值：會返回剛剛建立的那個窗口，用於關閉

示例代碼： [04-window.open.html]

<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');

    btn.onclick = function() {
        // 在新窗口打開，新窗口的大小爲300 * 300
        var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");
    }

    btn2.onclick = function() {
        // 在當前窗口打開，新窗口的大小根據當前窗口改變的，設置的無效
        var newWin = window.open("http://www.baidu.com", "_self");
    }
</script>

效果圖：

2.3 window.close

window.close() 關閉一個窗口在火狐瀏覽器下會失效解決辦法

newWin.close()；//newWin是剛剛建立的那個窗口
window.close(); //把當前窗口給關閉了

示例代碼： [05-window.close.html]

<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button>
<button id="btn3">點擊關閉打開的新窗口</button>
<button id="btn4">點擊關閉本窗口</button>

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var btn2 = document.getElementById('btn2');

    btn.onclick = function() {
        // 在新窗口打開，新窗口的大小爲300 * 300
        var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");

        btn3.onclick = function() {
            // 關閉打開的新窗口
            newWin.close();
        }
    }
    btn2.onclick = function() {
        // 在當前窗口打開，新窗口的大小根據當前窗口改變的，設置的無效
        var newWin2 = window.open("http://www.baidu.com", "_self");

    }
    btn4.onclick = function() {
        // 關閉本窗口
        window.close();
    }
</script>

效果圖：

3. 定時器

定時器裏面不能用 this，由於在定時器裏面， this，指向的是全局對象 window。

3.1 延時定時器

延時定時器可讓代碼延遲一段時間以後才執行。定時器不是咱們調用，咱們只須要把函數的地址傳過去，時間到了， window會本身調用。

一、設置延時定時器

語法：setTimeOut(callback, time);

參數1：回調函數，時間到了就會執行。
參數2：延時的時間 單位：毫秒
返 回：定時器的id，用於清除

示例代碼： [06-延時定時器.html]

var timer = setTimeOut(function(){
    //1秒後將執行的代碼。
    console.log("哈哈");
}, 1000);

2.清除延時定時器

語法：clearTimeOut(timerId);

// 參數：定時器id
clearTimeOut(timerId);

示例代碼：

<!-- html 部分 -->
<button id="btn1">開啓</button>
<button id="btn2">關閉</button>

<!-- js 部分 -->
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    // 定義一個全局變量
    var timeId; 
    // 開啓定時器
    btn1.onclick = function() {
        //設置了一個定時器，會返回一個定時器id
        timeId = setTimeout(function() {
            // 兩秒後在頁面顯示 Boom！
            document.write("<h1> Boom! </h1>");
        }, 2000);
    }
        
    //  清除定時器
    btn2.onclick = function() {
        //清除定時器, 須要定時器id
        clearTimeout(timeId);
    }
</script>

效果圖：兩秒後執行代碼，兩秒鐘以內清除定時器，就不會執行

3.2 間歇定時器

間歇定時器讓定時器每隔一段時間就會執行一次，而且會一直執行，到清除定時器爲止。

一、設置間歇定時器

語法：var intervalID = setInterval(func, delay);

參數1：重複執行的函數
參數2：每次延遲的毫秒數
返 回：定時器的id，用於清除

示例代碼：

var timer = setInterval(function(){
    //重複執行的代碼。
}, 1000);

二、清除間歇定時器

語法：clearInterval(intervalID);

參數：定時器id

示例代碼： [07-間歇定時器.html]

<!-- html 部分 -->
<button id="btn1">開啓</button>
<button id="btn2">關閉</button>

<!-- js 部分 -->
<script>
    var btn1 = document.getElementById("btn1");
    var btn2 = document.getElementById("btn2");
    // 定義一個全局變量 存放定時器
    var timer;
    // 開啓定時器
    btn1.onclick = function() {
        //設置了一個定時器，會返回一個定時器 id
        timer = setInterval(function() {
            // 每隔1秒 就會建立一個 h2 標籤
            var tag = document.createElement("h2");
            tag.innerHTML = "我是間歇定時器";
            document.body.appendChild(tag);
        }, 1000);
    };
    //  清除定時器
    btn2.onclick = function() {
        //清除定時器, 須要定時器id
        clearInterval(timer);
        document.body.innerHTML = "<h1>間歇定時器已清除</h1>";
    };
</script>

效果圖：

2.3 定時器綜合練習

一、獲取短信驗證碼案例 [08-定時器綜合練習-獲取短信驗證碼.html]

<!-- html 部分-->
<input type="button" value="點擊獲取短信驗證碼" id="btn">

<!-- js 部分 -->
<script>
    var btn = document.getElementById('btn');
    var timer = null;
    btn.onclick = function() {
        // 倒計時的秒數
        var num = 5;
        // 當按鈕點擊的時候 禁用button
        btn.disabled = true;

        timer = setInterval(function() {
            // 每隔一秒修改num的值
            num--;
            // 修改btn的value值  這裏不能夠用this 由於定時器裏的this指的是window對象
            btn.value = num + "秒後可再次發送";

            // 當num = 0 秒的時候，清除定時器
            if (num == 0) {
                clearInterval(timer);
                btn.disabled = false;
                btn.value = "點擊獲取短信驗證碼";
            }
        }, 1000);
    }
</script>

效果圖：

二、倒計時案例 [09-定時器綜合練習-倒計時案例.html]

<!-- 樣式部分 -->
<style>
    .time {
        width: 160px;
        height: 40px;
        margin: 100px auto;
        line-height: 40px;
        font-size: 24px;
        font-weight: 700;
    }
    #h,
    #m,
    #s {
        float: left;
        display: block;
        width: 40px;
        height: 40px;
        text-align: center;
        background-color: #F9F9F9;
        box-shadow: 1px 1px 2px #616161;
        color: #453246;
        border-radius: 5px;
    }
    .split {
        width: 20px;
        float: left;
        text-align: center;
    }
</style>

<!-- html 部分 -->
<div class="time">
    <span id="h">00</span>
    <span class="split">:</span>
    <span id="m">00</span>
    <span class="split">:</span>
    <span id="s">00</span>
</div>

<!-- js 部分 -->
<script>
    var h = document.getElementById('h');
    var m = document.getElementById('m');
    var s = document.getElementById('s');

    setTime();
    var timer = setInterval(setTime, 1000);

    function setTime() {
        // 獲取當前時間
        var newTime = new Date(); // 此時測試的時間是 2017-12-11 15:24:00(根據本地時間一直在變)
        // 定義一個將來的時間
        var futureTime = new Date("2017-12-11 16:30:31");
        // 獲取時間差 單位是毫秒 首先咱們須要轉成秒 並且時間戳獲取的時候 有不少小數 須要取整一下
        var time = parseInt((futureTime - newTime) / 1000);

        // time如今已是秒了  咱們須要將它轉換成小時
        // 1h = 3600s
        var hours = parseInt(time / 3600);
        // 將獲取的小時添加到頁面中 
        // 注意由於時鐘是兩位數，這裏的小時可能只是一個個位數，因此須要拼接一個 "0"
        // 由於 分鐘、秒都須要拼0，因此咱們能夠封裝一個函數
        h.innerHTML = addZero(hours);

        // 獲取分鐘
        // 先將 time 轉換成分鐘 再去取餘60
        var minutes = parseInt(time / 60) % 60;
        // 將獲取的分鐘添加到頁面中 
        m.innerHTML = addZero(minutes);

        // 獲取秒
        var seconds = time % 60;
        s.innerHTML = addZero(seconds);

        // 還要作個判斷 當time這個時間差小於等於0的時候 清除定時器
        if (time <= 0) {
            // 若是不置0的話 還會繼續減
            time = 0;
            clearInterval(timer);
        }
    }

    // 拼接 0 函數
    function addZero(num) {
        // 若是傳進來的參數小於10 就要給他拼 0
        return num < 10 ? '0' + num : num;
    }
</script>

效果圖：

三、電子錶案例 [10-定時器綜合練習-電子錶.html]

<!-- 樣式部分 -->
<style>
    #box {
        width: 300px;
        height: 50px;
        background-color: #F9F9F9;
        box-shadow: 1px 1px 2px #616161;
        color: #453246;
        border-radius: 5px;
        margin: 100px auto;
        font: bold 24px/50px 楷體;
        text-align: center;
    }
</style>

<!-- html 部分 -->
<div id="box"></div>

<!-- js 部分 -->
<script>
    var box = document.getElementById('box');
    // 封裝一個獲取當前時間的函數
    function getTime() {
        // 獲取當前時間
        var date = new Date();
        console.log(date);
        // 獲取當前的年份
        var year = date.getFullYear();
        // 獲取當前時間的月份
        var month = addZero(date.getMonth() + 1);
        // 獲取當前的天
        var day = addZero(date.getDate());
        // 獲取小時
        var hours = addZero(date.getHours());
        // 獲取分鐘
        var minutes = addZero(date.getMinutes());
        // 獲取秒
        var seconds = addZero(date.getSeconds());
        // 將時間格式設置爲以下格式
        var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        return str;
    }
    // 拼 0 函數
    function addZero(num) {
        return num < 10 ? "0" + num : num;
    }
    
    // 定時器會延遲一秒執行，在外面定義一遍 會補償這個一秒
    box.innerHTML = getTime();
    setInterval(function() {
        box.innerHTML = getTime();
    }, 1000);
</script>

效果圖：

四、機械錶案例 [11-定時器綜合練習-機械錶.html]

<!-- 樣式部分 -->
<style>
    .clock {
        width: 600px;
        height: 600px;
        margin: 100px auto;
        background: url(../image/機械錶/clock.jpg) no-repeat;
        position: relative;
    }
    
    .clock div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../image/機械錶/hour.png) no-repeat center center;
    }
    
    #m {
        background-image: url(../image/機械錶/minute.png);
    }
    
    #s {
        background-image: url(../image/機械錶/second.png);
    }
</style>

<!-- html 部分 -->
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>

<!-- js 部分 -->
<script>
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");

    function setTime() {
        // 獲取當前時間
        var date = new Date();
        // 設置秒針
        var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);
        s.style.transform = "rotate(" + 6 * seconds + "deg)";

        // 設置分針
        // 60分鐘一圈360度 每分鐘至關於 6度 這樣只會一分分鐘的走
        // 咱們想要的效果是秒針旋轉地同時  分針也在微弱的旋轉 seconds/60獲得一個小數 加上分鐘 再去乘以角度
        var minutes = date.getMinutes() + seconds / 60;
        m.style.transform = "rotate(" + 6 * minutes + "deg)";

        // 設置時針
        // 12個小時是一圈360度 每一個小時至關於 30度
        var hours = date.getHours() + minutes / 60;
        h.style.transform = "rotate(" + 30 * hours + "deg)";
    }
    // 頁面一加載就執行一次
    setTime();
    // 讓window每隔15ms就執行一次  1秒鐘 分紅 25份就已經有動畫效果  分紅60份，很細膩
    setInterval(setTime, 15);
</script>

效果圖：

4. Location對象

location對象也是 window的一個屬性， location其實對應的就是瀏覽器中的地址欄。

4.1 經常使用的屬性和方法

location.href:控制地址欄中的地址

location.href = "http://www.baidu.com"; //讓頁面跳轉到百度首頁

location.reload()讓頁面從新加載

location.reload(true);//強制刷新，至關於ctrl+F5
location.reload(false);//刷新，至關於F5

location的其餘屬性

console.log(window.location.hash);      // 哈希值 其實就是錨點
console.log(window.location.host);      // 服務器 服務器名+端口號
console.log(window.location.hostname);  // 服務器名
console.log(window.location.pathname);  // 路徑名
console.log(window.location.port);      // 端口
console.log(window.location.protocol);  // 協議
console.log(window.location.search);    // 參數

示例代碼：定時跳轉網址 [12-location對象-定時跳轉.html]

<!-- html 部分 -->
<a href="#" id="link">註冊成功，5秒後跳轉</a>

<!-- js 部分 -->
<script>
    var num = 5;
    var link = document.getElementById('link');
    var timer = setInterval(function() {
        num--;
        link.innerHTML = "註冊成功，" + num + "秒後跳轉";
        // 若是倒計時等於0的時候，自動跳轉到網址
        if (num == 0) {
            clearInterval(timer);
            location.href = "https://segmentfault.com/u/marsman_levi";
        }
    }, 1000);
</script>

效果圖：

5. Navigator 對象

window.navigator的一些屬性能夠獲取客戶端的一些信息

navigator.userAgent：返回瀏覽器版本 

navigator.onLin：返回網絡狀態 true / false

示例代碼：獲取瀏覽器版本 [13-navigator對象.html]

// 打印瀏覽器版本
console.log(navigator.userAgent);

// 打印網絡狀態
console.log(navigator.onLine);

效果圖：

6. Screen 對象

window.screen的一些屬性能夠獲取屏幕的寬高

一、獲取屏幕的可佔用寬高

返回訪問者屏幕的寬度、高度，以像素計，減去界面特性，好比窗口任務欄。

screen.availWidth：獲取屏幕的可用寬度

screen.availHeight：獲取屏幕的可用高度

二、獲取屏幕寬高

screen.width：獲取屏幕的寬度

screen.height：獲取屏幕的高度

示例代碼： [14-screen對象.html]

document.write("當前屏幕可佔用寬度：" + screen.availWidth + "<br>");    // 1864
document.write("當前屏幕可佔用高度：" + screen.availHeight + "<br>");   // 1080
document.write("當前屏幕寬度：" + screen.width + "<br>");              // 1920
document.write("當前屏幕高度：" + screen.height + "<br>");             // 1080

效果圖：

7. History 對象

history對象表示頁面的歷史

一、後退 history.back()

history.back() 方法加載歷史列表中的前一個URL。這與在瀏覽器中點擊後退按鈕是相同的：

history.back();
history.go(-1);

二、後退 history.forward()

history forward() 方法加載歷史列表中的下一個URL。這與在瀏覽器中點擊前進按鈕是相同的：

history.forward();
history.go(1);

8. javascript 彈框

在 javascript中能夠建立 3種彈框，分別是：警告框、確認框、提示框。

一、警告框 alert

警告框常常用於確保用戶能夠獲得某些信息。
當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做。

window.alert("呵呵呵");
// window.alert() 方法能夠不帶上window對象，直接使用alert()方法。
alert("呵呵呵");

二、確認框 confirm

確認框一般用於驗證是否接受用戶操做。
當確認卡彈出時，用戶能夠點擊 "確認" 或者 "取消" 來肯定用戶操做。
當你點擊 "確認", 確認框返回 true，若是點擊 "取消", 確認框返回 false。

var result = confirm();
if (result == true) {
    alert("你真的是豬!");
} else {
    alert("你不是豬！");
}

三、提示框 prompt

提示框常常用於提示用戶在進入頁面前輸入某個值。
當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。
若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲null。

// 參數一：提示內容  參數er：能夠省略，輸入框默認顯示內容
var person = prompt("請輸入你的名字", "Levi丶");
if (person != null && person != "") {
    alert("你好" + person);
}

四、彈框換行
彈窗使用 反斜槓 + "n"(\n) 來設置換行。

alert("你們好\n我是\nLevi丶");

9. javascript Cookie

Cookie用於存儲 web頁面的用戶信息

一、什麼是Cookie？

Cookie是一些數據, 存儲於你電腦上的文本文件中。
當web服務器向瀏覽器發送web頁面時，在鏈接關閉後，服務端不會記錄用戶的信息。
Cookie的做用就是用於解決 "如何記錄客戶端的用戶信息":
- 當用戶訪問web頁面時，他的名字能夠記錄在cookie中。
- 在用戶下一次訪問該頁面時，能夠在cookie中讀取用戶訪問記錄。

Cookie以名/值對形式存儲，以下所示:

username=Levi

當瀏覽器從服務器上請求web頁面時，屬於該頁面的cookie會被添加到該請求中。服務端經過這種方式來獲取用戶的信息。

二、使用 JavaScript 建立Cookie

JavaScript可使用 document.cookie屬性來建立、讀取、及刪除 cookie。

JavaScript中，建立cookie以下所示：

document.cookie = "username = Levi";

你還能夠爲cookie添加一個過時時間（以 UTC 或 GMT 時間）。默認狀況下，cookie 在瀏覽器關閉時刪除：

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";

你可使用path參數告訴瀏覽器cookie的路徑。默認狀況下，cookie屬於當前頁面

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

三、使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可使用如下代碼來讀取cookie：

var x = document.cookie;

document.cookie將以字符串的方式返回全部的cookie，類型格式cookie1=value; cookie2=value; cookie3=value;

四、使用 JavaScript 修改 Cookie

在 JavaScript 中，修改cookie相似於建立cookie，以下所示：

document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

舊的cookie將被覆蓋。

五、使用 JavaScript 刪除 Cookie

刪除cookie很是簡單。您只須要設置expires參數爲之前的時間便可，以下所示

document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";

注意，當您刪除時沒必要指定 cookie 的值。

六、Cookie 字符串

document.cookie屬性看起來像一個普通的文本字符串，其實它不是。

即便您在document.cookie中寫入一個完整的cookie字符串, 當您從新讀取該cookie信息時，cookie 信息是以名/值對的形式展現的。

若是您設置了新的cookie，舊的cookie不會被覆蓋。新cookie將添加到document.cookie 中，因此若是您從新讀取document.cookie。

上一篇：JavaScript 基礎知識 - DOM篇(二)
下一篇：JavaScript 進階知識 - 特效篇(一)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。