javascript代码实例教程-读javascript高级程序设计17-在线检测,cookie,子cookie

发布时间:2019-01-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-读javascript高级程序设计17-在线检测,cookie,子cookie脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器。@L_406_0@提供了检测在线状态的方法: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。

 

Image

 

常用的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="btn-know0">不再提示</a></p>

    <p id="know1">友情提示区域2 <a href="javascript:void(0)" target="_self" id="btn-know1">不再提示</a></p>

    <input type="button" value="清除cookie" id="delete-btn" />

    <script type="text/javascript">

var cookiekey = &#39;iknow',

key0 = 'know0',

key1 = 'know1';

EventUtil.addHandler(window, 'load', function () {

  var know0 = SubCookieUtil.get(cookiekey, key0);

  if (know0) {

    document.getElementById('know0').style.display = 'none';

  }

  var know1 = SubCookieUtil.get(cookiekey, key1);

  if (know1) {

    document.getElementById('know1').style.display = 'none';

  }

  EventUtil.addHandler(document.getElementById('delete-btn'), 'click', function () {

    SubCookieUtil.unset(cookiekey, key0);

    SubCookieUtil.unset(cookiekey, key1);

  })

  EventUtil.addHandler(document.getElementById('btn-know0'), 'click', function () {

    SubCookieUtil.set(cookiekey, key0, 1);

    document.getElementById('know0').style.display = 'none';

  });

  EventUtil.addHandler(document.getElementById('btn-know1'), 'click', function () {

    SubCookieUtil.set(cookiekey, key1, 1);

    document.getElementById('know1').style.display = 'none';

  });

});

    </script>

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-读javascript高级程序设计17-在线检测,cookie,子cookie全部内容,希望文章能够帮你解决javascript代码实例教程-读javascript高级程序设计17-在线检测,cookie,子cookie所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。