高级程序设计(第3版)第二十三章离线应用与客户端存储/笔记离线应用与客户端存储

高级程序设计(第3版)第二十三章离线应用与客户端存储/笔记
离线应用与客户端存储

离线检测

开发离线应用的第一步是要知道设备是在线还是离线
navigator.onLine 属性，属性值为 true 表示设备能上网，值为 false 表示设备离线。
HTML5 还定义了两个事件： online 和 offline。

当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件

EventUtil.addHandler(window, "online", function(){
  alert("Online");
}); 
EventUtil.addHandler(window, "offline", function(){
  alert("Offline");
}); 
//为了检测应用是否离线，在页面加载后，好先通过 navigator.onLine 取得初始的状态。
//然后， 就是通过上述两个事件来确定网络连接状态是否变化。

应用缓存

应用缓存（Appcache）就是从浏览器的缓存中分出来的一块缓存区
要想在这个缓存中保存数据，可以使用一个描述文件（manifest file）
要将描述文件与页面关联起来，可以在<html>中的 manifest 属性中指定这个文件的路径

//描述文件示例
CACHE MANIFEST 
#Comment 
 
file.js 
file.css 
//示例结束
//指定路径
<html manifest="/offline.manifest">

API的核心是 applicationCache 对象有一个 status 属性，值是常量，表示应用缓存的如下当前状态。

　　　　 0：无缓存，即没有与页面相关的应用缓存。

　　　　 1：闲置，即应用缓存未得到更新。

　　　　 2：检查中，即正在下载描述文件并检查更新。

　　　　 3：下载中，即应用缓存正在下载描述文件中指定的资源。

　　　　 4：更新完成，即应用缓存已经更新了资源且所有资源都已下载完毕，可以通过 swapCache() 来使用了。

　　　　 5：废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存。

应用缓存还有很多相关的事件，表示其状态的改变。以下是这些事件。

　　　　 checking：在浏览器为应用缓存查找更新时触发。

　　　　 error：在检查更新或下载资源期间发生错误时触发。

　　　　 noupdate：在检查描述文件发现文件无变化时触发。

　　　　 downloading：在开始下载应用缓存资源时触发。

　　　　 progress：在文件下载应用缓存的过程中持续不断地触发。

　　　　 updateready：在页面新的应用缓存下载完毕且可以通过 swapCache()使用时触发。

　　　　 cached：在应用缓存完整可用时触发。

一般来讲，这些事件会随着页面加载按上述顺序依次触发。
不过，通过调用 update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件。

applicationCache.update(); 
//update()一经调用，应用缓存就会去检查描述文件是否更新（触发 checking 事件），
//然后就像页面刚刚加载一样，继续执行后续操作

数据存储

　　　　这个 HTTP响应设置以 name 为名称、以 value 为值的一个 cookie

限制

cookie在性质上是绑定在特定的域名下的。
cookie是存在客户端计算机上的，每个域的 cookie总数是有限的
当超过单个域名限制之后还要再设置 cookie，浏览器就会清除以前设置的 cookie

cookie的构成

名称：一个唯一确定cookie的名称。

cookie名称是不区分大小写的，名称在传送时必须是 URL 编码的

值：储存在 cookie中的字符串值。值必须被 URL编码。
域：cookie 对于哪个域是有效的。
路径：对于指定域中的那个路径，应该向服务器发送 cookie
失效时间：表示 cookie 何时应该被删除的时间戳

默认情况下，浏览器会话结束时即将所有 cookie删除；不过也可以自己设置删除时间。

安全标志：指定后，cookie 只有在使用 SSL 连接的时候才发送到服务器。

JavaScript中的 cookie

在js中处理cookie有些复杂，因为众所周知的蹩脚的接口，即BOM的document.cookie属性
基本的 cookie操作有三种：读取、写入和删除。它们在 CookieUtil 对象中如下表示

var socket = new WebSocket("ws://www.example.com/server.php");
var CookieUtil = {
    get:function(name){
        var cookieName = encodeURIComponent(name) + "=" ,
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;

        if(cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(";",cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
        }

        return cookieValue;
    },
    set:function(name,value,expires,path,domain,secure){
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

        if(expires instanceof Date){
            cookieText += "; expires=" + expires.toGMTString();
        }
        if(path){
            cookieText += "; path=" + path;
        }
        if(domain){
            cookieText =+ "; domain=" + domain;
        }
        if(secure){
            cookieText += "; secure=" + secure;
        }
        document.cookie = cookieText;
    },
    unset:function(name,path,domain,secure){
        this.set(name,"",new Date(0),path,domain,

高级程序设计(第3版)第二十三章离线应用与客户端存储/笔记 离线应用与客户端存储

相关推荐

高级程序设计(第3版)第二十三章离线应用与客户端存储/笔记离线应用与客户端存储