JavaScript-cookie

在線狀態檢測javascript

開發離線應用時，每每在離線狀態時把數據存在本地，而在聯機狀態時再把數據發送到服務器。html5提供了檢測在線狀態的方法：navigator.onLine和online/offline事件。html

1.navigator.onLine屬性html5

表示當前的網絡狀態是否在線，true表示在線，false表示離線。當網絡狀態變化時，該屬性也會隨之變化。java

2.online和offline事件數組

HTML5提供了這兩個事件，會在網絡狀態變化時觸發。online在網絡由離線變爲在線時觸發；offline在網絡由在線變爲離線時觸發。瀏覽器

<p>You are currently:
    <span id="status">
        <script>document.write(navigator.onLine ? "在線" : "離線");</script>
    </span>
</p>
<p>切換脫機狀態，看看效果</p>
<script>
    EventUtil.addHandler(window, "online", function(){
        document.getElementById("status").innerHTML = "在線";
    });
    EventUtil.addHandler(window, "offline", function(){
        document.getElementById("status").innerHTML = "離線";
    });
</script>

cookie安全

1.cookie構成：服務器

名稱：cookie的名稱必須是通過URL編碼後的字符串。雖然它是不區分大小寫的，可是實際應用時建議把它看成區分大小寫來使用。
值：cookie中字符串值，也必須是通過URL編碼的字符串。
域：表示cookie對於哪一個域有效。
路徑：cookie是針對域中的哪一個目錄生效。
失效時間：表示cookie失效時間的時間戳，它是GMT格式的日期。將該事件設置小於當前時，就至關於刪除了cookie。
安全標識：指定該標識後，只有使用SSL請求鏈接的時候cookie纔會發送到服務器。secure標識是cookie中惟一一個非鍵值對的部分，它只包含一個secure單詞。

2.cookie讀寫刪除操做cookie

在JavaScript中能夠經過document.cookie能夠讀取當前域名下的cookie，是用分號隔開的鍵值對構成的字符串。相似於name=aa;age=15;網絡

注意全部的鍵值對名稱和值都是通過encodeURIComponent()編碼的，使用時要進行解碼。

當給document.cookie賦值時，不會直接覆蓋現有的cookie，而是會追加一個新的cookie。例如：

document.cookie="a=1";//執行後會看到新增了一個cookie。

經常使用的cookie讀寫刪除方法：

var CookieUtil = {
//根據key讀取cookie
    get: function (name){
         //注意對鍵編碼
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;
        //找到cookie鍵
        if (cookieStart > -1){
             //鍵後面第一個分號位置
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            //cookie值解碼
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        return cookieValue;
    },
    //設置cookie
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        //失效時間，GMT時間格式
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += "; path=" + path;
        }
        if (domain) {
            cookieText += "; domain=" + domain;
        }
        if (secure) {
            cookieText += "; secure";
        }
        document.cookie = cookieText;
    },
    //刪除cookie，保持相同的鍵、域、路徑、安全選項，而後設置失效時間便可
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }
};

3.子cookie

有時站點須要記錄多個cookie，好比多塊功能區域都有氣泡提示，點擊「再也不提示」後取消提醒，此時每一個區域都須要記錄一個很簡單的cookie。因爲瀏覽器cookie數量是有限制的，爲了減小cookie數量可使用子cookie的方式。在一個cookie值中使用相似查詢字符串的格式能夠存儲多組鍵值對，這樣就沒必要每一個鍵值對都佔用一個cookie了。子cookie值舉例：

iknow=know0=1&know1=1

①獲取全部子cookie並將它放在一個對象中返回，對象的屬性名爲子cookie名稱，對象的屬性值爲子cookie的值。

getAll: function(name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd,
            subCookies,
            i,
            parts,
            result = {};
        if (cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart)
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            //取出cookie字符串值
            cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
            if (cookieValue.length > 0){
                   //用&將cookie值分隔成數組
                subCookies = cookieValue.split("&");
                for (i=0, len=subCookies.length; i < len; i++){
                       //等號分隔出鍵值對
                    parts = subCookies[i].split("=");
                    //將解碼後的兼職對分別做爲屬性名稱和屬性值賦給對象
                    result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
                }
                return result;
            }
        }
        return null;
    }

②get()獲取單個子cookie。

get: function (name, subName){
         //獲取全部子cookie
        var subCookies = this.getAll(name);
        if (subCookies){
             //從屬性中獲取單個子cookie
            return subCookies[subName];
        } else {
            return null;
        }
    }

③setAll設置整個cookie

setAll: function(name, subcookies, expires, path, domain, secure){
        var cookieText = encodeURIComponent(name) + "=",
            subcookieParts = new Array(),
            subName;
        //遍歷子cookie對象的屬性
        for (subName in subcookies){
             //要先檢測屬性名
            if (subName.length > 0 && subcookies.hasOwnProperty(subName)){
                 //屬性名和屬性值編碼後=鏈接爲字符串，並放到數組中
                subcookieParts.push(encodeURIComponent(subName) + "=" + encodeURIComponent(subcookies[subName]));
            }
        }
        if (subcookieParts.length > 0){
             //用&鏈接子cookie串
            cookieText += subcookieParts.join("&");
            if (expires instanceof Date) {
                cookieText += "; expires=" + expires.toGMTString();
            }
            if (path) {
                cookieText += "; path=" + path;
            }
            if (domain) {
                cookieText += "; domain=" + domain;
            }
            if (secure) {
                cookieText += "; secure";
            }
        } else {
            cookieText += "; expires=" + (new Date(0)).toGMTString();
        }
        //設置整個cookie
        document.cookie = cookieText;
    }

④set設置單個子cookie

set: function (name, subName, value, expires, path, domain, secure) {
        //獲取當前cookie對象
        var subcookies = this.getAll(name) || {};
        //單個cookie對應的屬性替換
        subcookies[subName] = value;
        //從新設置cookie
        this.setAll(name, subcookies, expires, path, domain, secure);
    }

⑤刪除cookie

刪除整個cookie，將失效時間設置爲過時日期便可。

unsetAll: function(name, path, domain, secure){
        this.setAll(name, null, new Date(0), path, domain, secure);
    }

刪除單個子cookie，須要先獲取全部子cookie對象，而後刪除子cookie對應的屬性，最後再將子cookie對象從新設置回去。

unset: function (name, subName, path, domain, secure){
         //獲取當前cookie對象
        var subcookies = this.getAll(name);
        if (subcookies){
             //刪除子cookie對應的屬性
            delete subcookies[subName];
          //從新設置cookie
            this.setAll(name, subcookies, null, path, domain, secure);
        }
    }

注意：cookie不能用來存儲大量數據，也不能存儲敏感數據。