缓存与IndexedDB

（一）离线检测

单独使用navigator.onLine不能确定网络连通，配合两个HTML5事件使用

//测试网络连通
if(navigator.onLine) {
    //正常任务
}else {
    //离线任务
}
EventUtils.addHandler(window, "online", function() {})
EventUtils.addHandler(window, "offline", function() {})

页面加载后，最好先通过navigator.onLine取得初始状态，然后再用两个事件监听。

（二）应用缓存

appcache是浏览器缓存的一部分，描述文件里面写了离线后要用的文件，描述文件的类型是text/cache-manifest
applicationCache对象的status属性，表示应用缓存的状态

状态值	描述
0	无缓存
1	应用缓存未更新
2	下载描述文件检查更新
3	下载中
4	更新完成
5	废弃，缓存描述文件不存在

应用缓存的事件

事件	描述
checking	查找更新触发
error	更新下载期间出错
noupdate	描述文件无变化
downloading	开始下载缓存
process	下载过程持续触发
updateready	下载完并且能通过swapCache时触发
cached	缓存完整时触发

EventUtils.addHandler(applicationCache, "updateready", function() {
    applicationCache.swapCache();  //启动新应用缓存
});

（三）IndexedDB

IndexedDB的所有操作都是异步的。

1. IndexedDB数据库

//浏览器兼容使用
var indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;

var request,
        db;
//打开‘admin’数据库，如果没有，新建一个并打开
request = indexedDB.open("admin");    //开启admin数据库
request.onerror = function(event) {
    console.log(event.target.errorCode);
};
request.onsuccess = function(event) {
    db = event.target.result;   //IDBDatabase对象
};
//修改database版本
if (db.version != '1.0') {
    request = db.setVersion('1.0');
    request.onerror = function(event) {
        console.log(event.target.errorCode);
    };
    request.onsuccess = function(event) {
        console.log(db.name + " " + db.version);
    };
}

2. 创建表，添加数据

var user = {
    username: 'cao',
    age: 21
};
var users = [user];
var requests = [];
//创建表
var store = db.createObjectStore("users", {keyPath: "username"});
//add插入  put更新
var i = 0,
        len = users.length;
while(i < length) {
    request = store.add(users[i++]);
    request.onerror = function() {};
    request.onsuccess = function(){};
    requests.push(request);
};

3. 游标查询

var transaction = db.transaction("users");  //读user表
var transaction = db.transaction(["users", "anotherStore"]);//一次读取多个表

//读写参数
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
//var transaction = db.transaction("users", IDBTransaction.READ_ONLY);
var transaction = db.transaction("users", IDBTransaction.READ_WRITE);
//var transaction = db.transaction("users", IDBTransaction.VERSION_CHANGE);

var request = db.transaction("users").objectStore("users").get("cao");
//request.onerror  
request.onsuccss = function(event) {
    var result = event.target.result;
    console.log(result.name);   //cao
}
transaction.onerror = function(){}          //整个事物取消
transaction.oncomplete = function(){}   //整个事物完成  这个event时间访问不到查
//询的任何数据，必须在request.onsuccess中访问

//游标查询  修改  删除
var store = db.transaction("users").objectStore("users"),
        request = store.openCursor(),
        value,
        updateRequest,
        deleteRequest;
request.onsuccess = function(event) {
    var cursor = event.target.cursor;    //IDBCursor对象
    if (cursor) {
        console.log(cursor.key +" " + JSON.stringify(cursor.value));
        //cursor.value是一个对象

        //更新该值
        if (cursor.key == "cao") {
            value = cursor.value;   //取得对象
            value.age = 22;
            updateRequest = cursor.update(value);  //请求更新该项
            updateRequest.onsuccess = function(){}
            updateRequest.onerror = function(){}
        }

        if (cursor.key == "cao") {
            //删除该值
            deleteRequest = cursor.delete();   //请求删除当前项
            deleteRequest.onsuccess = function(){}
            deleteRequest.onerror = function(){}
        }

        //下一项
        cursor.continue();   //最后一项调用onsuccess  但其cursor不存在，不会进入if
        //cursor.advance(3);    //向后移动三个
    }
    //如果当前没有修改权限，会抛异常
};
request.onerror = function(){}

IDBCursor对象属性	描述
direciton	游标移动方向 默认向后，IDBCursor.NEXT(0) PREV(2)前一个 NEXT_NO_DUPLICATE()1下一个不重复项 ……前一个不重复的项
key	对象的键
value	实际的对象
primaryKey	游标用的键