一、在线状态检测
开发离线应用时,往往在离线状态时把数据存在本地,而在联机状态时再把数据发送到服务器。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="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 = ‘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>
注意:cookie不能用来存储大量数据,也不能存储敏感数据。