indexedDB 相关

最近老大說要用indexedDB做东西，说用那个可以缓解服务器的压力，自己也做了个demo，感觉这个标准还是很不成熟，有很多问题.

做的DEMO在chrome 和firefox 都能正常运行，但是在自己的IE10预览版，不能正常运行，不知道自己写的问题还是浏览器的问题。

PS：最令人吐槽的就是在chrome 下，在连接indexedDB的时候如果加入断点会导致连接不上，如果在连接后加入断点不会出现问题.

下面说下代码吧

//獲取不同的 DB對象
    function initIDB() {
        if ('webkitIndexedDB' in window) {
            window.indexedDB = webkitIndexedDB;
            window.IDBKeyRange = webkitIDBKeyRange;
            window.IDBTransaction = window.webkitIDBTransaction;
        }
        else if ('mozIndexedDB' in window) {
            window.indexedDB = mozIndexedDB;
        }
        else if ('msIndexedDB' in window) {
            window.indexedDB = msIndexedDB;
        }
    }

由于每个浏览器的indexedDB对象不一样，所以在这里区分下，chrome用的是webkitIndexedDB，火狐最新版本的是mozIndexedDB，之前的低版本好像不是这样写的，也没做细的研究，IE10是msIndexedDB，但是这个我试的好像有点问题.

//頁面載入時連接本地DB
    function connect(onsuccess, onchange, onerror, onchangeerror) {
        if ('indexedDB' in window) {
            var req = indexedDB.open(dbName, dbVersion);
            req.onsuccess = function (e) {
                db = this.result;
                if (db.version == dbVersion) {
                    onsuccess(e);
                }
                else {
                    var dbReq = db.setVersion(dbVersion);
                    dbReq.onsuccess = function (e) {
                        var that = { result: this.source };
                        if (onchange) {
                            onchange.call(that, e);
                        }
                        onsuccess(e);
                    };
                    dbReq.onerror = onchangeerror || error;
                }
            };
            req.onerror = onerror || error;
            req.onupgradeneeded = onchange;
        }
        else {
            if (onerror) {
                onerror({});
            }
        }
    }

上面是连接indexedDB的相关代码.连接是的时候是分database的名称和版本号.版本号一般为1.0，如果版本好对不上会导致打开不了数据库，之前看别人DEMO里面写的是如果版本号不同，然后自己试了下他们代码好像有点问题，也没做详细的研究.

 function transaction(mode, process, onsuccess, onerror) {
        var transaction = db.transaction(storeName, mode || IDBTransaction.READ_ONLY);
        var store = transaction.objectStore(storeName);
        var storeReq = process(store);

        if (storeReq) {
            storeReq.onsuccess = onsuccess;
            storeReq.onerror =  error;
        }
    }

这个是indexedDB的事务，这个算比较好的地方吧. 这样的话也会有回滚的功能了

function query(callback, finalCallback) {
        transaction(IDBTransaction.READ_ONLY, function (store) {
            var range = IDBKeyRange.lowerBound(0);
            return store.openCursor(range);
        }, function (e) {
            var result = e.target.result;
            if (result) {
                if (callback) {
                    callback(result.value);
                }
                result.continue();
            }
            else {
                if (finalCallback) {
                    finalCallback()
                };
            }
        });
    }

这个是简单写的查询功能，是直接查出所有数据的功能，查询出来的结果然后再进行遍历来进行读取.

//拼接字符導入
    function append(value) {
        var str = $("<tr><td>" + value.user_id + "</td><td>" + value.dep + "</td><td>" + value.position + "</td><td><button>刪除</button></td></tr>")
        $("#user_tb").append(str);
        str.find('button').click(function (e) {
            remove(value.user_id, getList);
        });
    }

这里面我使用的是jquery注册点击删除数据，如果写死直接写在拼接字符中发现虽然触发了删除的事件，但是数据还是没有删除，发现应该是浏览器的BUG，实在chrome中试的.
　　以上的差不多是这段事件对indexedDB的一个小总结吧，感觉indexedDB还不是很成熟，确实有很多问题，所有还是不建议使用。如果想详细的了解的话建议去

http://bulaoge.net/user.blg?dmn=g3g4&cid=0&pg=2看下，他些的关于indexedDB很不错.

　　create by Nineteen 2012.12.18