一、什麼是cookie？

頁面用來儲存資訊，如：自動登入、記住使用者名稱
二、cookie的特性
1.同一個網站中所有頁面共享一套cookie
2.數量、大小有限
3.有過期時間
三、js中使用cookie
document.cookie
四、cookie的使用
1.設定cookie：
格式：名字=值（多條不會覆蓋）
過期時間：expires = 時間
封裝函式
2.讀取cookie（字串的分割）

3.刪除cookie（已經過期）

 五、封裝cookie

    //建立cookie
    function setCookie(name,value,expiresDay) {
        
 
var oDay = new Date();
        oDay.setDate(oDay.getDate() + expiresDay);

        document.cookie = name + ' = ' + value + '; expires = ' + expiresDay;
    }

    //得到cookie
    function getCookie(name) {
        var arr = document.cookie.split('; '); //cookie間是用;+空格隔開的
        for (let i = 0; i < arr.length; i++) {
            
 
var arr2 = arr[i].split('=');
            if (arr2[0] == name) {
                return arr2[1];
            }
        }
        return '';
    }

    //刪除cookie
    function removeCookie(name) {
        setCookie(name,1,-1); //-1天后過期，則瀏覽器立馬刪除
    }

    setCookie('userName','blue',100);

六、cookie簡單示例（網頁登入中應用cookie）

JavaScript：

    window.onload = function() {
        var oForm = document.getElementById('form1');
        var oUser = document.getElementsByName('user')[0];

        oForm.onsubmit = function() {
            setCookie('user', oUser.value, 14);
        }

        oUser.value = getCookie('user');
    }    

html：

<form id="form1" action="http://www.baidu.com/">
    使用者名稱:<input type="text" name="user"> <br>
    密碼:<input type="password" name="password"> <br>
    <input type="submit" value="登入">
</form>

七、彩蛋

表單提交到了百度的伺服器，於是在百度首頁的console裡看到如下文字：

嗯，好大一個蛋~