读javascript高级程序设计17-在线检测,cookie,子cookie

一、在线状态检测

开发离线应用时，往往在离线状态时把数据存在本地，而在联机状态时再把数据发送到服务器。html5提供了检测在线状态的方法：navigator.onLine和online/offline事件。

1.navigator.onLine属性

表示当前的网络状态是否在线，true表示在线，false表示离线。当网络状态变化时，该属性也会随之变化。

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中字符串值，也必须是经过URI编码的字符串。
• 域：表示cookie对于哪个域有效。
• 路径：cookie是针对域中的哪个目录生效。
• 失效时间：表示cookie失效时间的时间戳，它是GMT格式的日期。将该事件设置小于当前时，就相当于删除了cookie。
• 安全标识：指定该标识后，只有使用SSL请求连接的时候cookie才会发送到服务器。secure标识是cookie中唯一一个非键值对的部分，它只包含一个secure单词。

2.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);    }};

实例：“不再提示”

<p id="know">友情提示区域1 <a href="javascript:void(0)" target="_self" id="btn-know">不再提示</a></p>    <input type="button" value="清除cookie" id="delete-btn" />    <script type="text/javascript">         var cookiekey="知道了";        EventUtil.addHandler(window, "load", function(){                 var know1 = CookieUtil.get(cookiekey);            if(know1){                 document.getElementById("know").style.display="none";                 }            EventUtil.addHandler(document.getElementById("delete-btn"), "click", function(){                CookieUtil.unset(cookiekey);                    })               });        EventUtil.addHandler(document.getElementById("btn-know"),"click",function(){             CookieUtil.set(cookiekey, "1");             document.getElementById("know").style.display="none";             });    </script>

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记录在同一个cookie中。

<p id="know0">友情提示区域1 <a href="javascript:void(0)" target="_self" id