文档章节

JavaScript-cookie

Leezy__
 Leezy__
发布于 2016/08/08 11:02
字数 1343
阅读 2
收藏 0

在线状态检测

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

 

1.navigator.onLine属性

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

 

2.onlineoffline事件

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读写删除操作

在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不能用来存储大量数据,也不能存储敏感数据。

 

 

本文转载自:http://www.cnblogs.com/janes/p/3981465.html

共有 人打赏支持
Leezy__
粉丝 1
博文 11
码字总数 11304
作品 0
朝阳
程序员
运用JS设置cookie、读取cookie、删除cookie

JavaScript是运行在客户端的脚本,因此一般是不能够设置Session的,因为Session是运行在服务器端的。 而cookie是运行在客户端的,所以可以用JS来设置cookie. 假设有这样一种情况,在某个用例...

落埖纷飞
2013/06/26
0
0
帮助你简化Cookie操作的javascript类库 - cookie.js

日期:2012-4-24 来源:GBin1.com 做web开发的朋友不可避免的需要处理cookie,以往我们使用javascript处理cookie的过程繁琐并且容易出错,所以往往使用一些现成的处理cookie的javascript代码...

gbin1
2012/04/25
0
0
javascript操作cookie函数写法

整理了两种简单的javascript操作cookie写法,均有三个功能:设置cookie、查询cookie、删除cookie。第一种简单易懂,第二种封装使用方便。原生js设置cookie。 简单版: function setCookie(n...

西西爱OS
2012/10/03
0
0
Javascript cookie使用详解

设置cookie 每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie: document.cookie="userId=828"; 如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如...

Adam-Lee
2012/02/06
0
0
js读取cookie,js添加cookie,js删除cookie

js读取cookie,js添加cookie,js删除cookie,示例如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Cont......

漠、
2012/06/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
33分钟前
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
今天
10
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部