html5 本地数据库 indexedDB 的使用

作者:赵金添 分类: 前端 发布于:2015-3-6 18:27 ė1138次浏览 60条评论
参考:
http://www.webhek.com/indexeddb
http://javascript.ruanyifeng.com/bom/indexeddb.html


简介:
IndexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据,你可以使用cookies或local storage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存,不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能,在online和offline模式下都能使用。你可以用IndexedDB存储大型数据。


预览:
http://my.codelab.cn/2015-03-06/indexedDB.html


代码:
var request, db, transaction, objectStore;

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if (!window.indexedDB) {
    console.log("你的浏览器不支持IndexedDB");
}

request = window.indexedDB.open("myDB", 1);

request.onupgradeneeded = function (e) {
    db = e.target.result;

    if (!db.objectStoreNames.contains('student')) {
        db.createObjectStore('student', {
            keyPath: 'id',
            autoIncrement: true
        }).createIndex('email', 'email', {
            unique: true
        });
    }
};

request.onsuccess = function (e) {
    db = e.target.result;

    transaction = db.transaction(['student'], 'readwrite');

    objectStore = transaction.objectStore('student');

    objectStore.add({
        username: 'allen-' + new Date().getSeconds(),
        age: new Date().getSeconds()
    });

    objectStore.delete(2);

    objectStore.get(1).onsuccess = function (e) {
        console.log('get: ', e.target.result);
    };

    transaction.oncomplete = function (e) {
        console.log('transaction complete');
    };

    transaction.onerror = function (e) {
        console.log('transaction error');
    };

    var cursor = objectStore.openCursor();

    cursor.onsuccess = function (e) {
        var res = e.target.result;

        if (res) {
            console.log('cursor: ', res.value);
            res.continue();
        }
    };

    objectStore.index('email').get('name').onsuccess = function (e) {
        console.log('index: ', e.target.source);
    };
};

request.onerror = function (e) {
    console.log('打开 DB 失败', e);
};

本文出自 赵金添的前端博客@福州软件外包公司,转载时请注明出处及相应链接。

0
分享本文至:

发表评论

电子邮件地址不会被公开。必填项已用*标注


Ɣ回顶部