indexdb使用

时间 2019-11-25
标签 indexdb 使用繁體版
原文原文链接
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>indexdb</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="Scripts/jquery-1.11.1.min.js"></script>
 
</head>

<body>
   
    <script>

    var myDB = {
        name: 'univisity',
        version: 1,
        db: null,
        ojstore: {
            name: 'students', //存储空间表的名字
            keypath: 'id' //主键
        }
    };

    var INDEXDB = {
        indexedDB: window.indexedDB || window.webkitindexedDB,
        IDBKeyRange: window.IDBKeyRange || window.webkitIDBKeyRange, //键范围
        /**
         * 打开数据库
         * @param  {[type]}   dbname    [数据库名称]
         * @param  {[type]}   dbversion [版本]
         * @param  {ObjectStore} callback  [对象存储空间]
         */
        openDB: function(dbname, dbversion, callback) {
            //创建或打开数据库，创建对象存储空间(ObjectStore)

            var version = dbversion || 1;
            var request = this.indexedDB.open(dbname, version);
            request.onerror = function(e) {
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess = function(e) {
                myDB.db = e.target.result;
                console.log('成功创建并打开数据库:' + myDB.name +'版本:'+  version + dbversion);
            };
            request.onupgradeneeded = function(e) {
                var db = e.target.result,
                    transaction = e.target.transaction,
                    store;
                if (!db.objectStoreNames.contains(myDB.ojstore.name)) {
                    //没有该对象空间时建立该对象空间
                    store = db.createObjectStore(myDB.ojstore.name, { keyPath: myDB.ojstore.keypath });
                    console.log('成功创建对象存储空间：' + myDB.ojstore.name);
                }
            }


        },
        /**
         * 删除数据库
         * @param  {[type]} dbname [要删除的数据库名字]
         * @return {[type]}        [description]
         */
        deletedb: function(dbname) {
            var self = this;
            self.indexedDB.deleteDatabase(dbname);
            console.log(dbname + '数据库已删除')
        },
        /**
         * 关闭数据库
         * @param  {[type]} db [数据库名称]
         * @return {[type]}    [description]
         */
        closeDB: function(db) {
            db.close();
            console.log('数据库已关闭')
        },

        /**
         * 添加数据
         * @param {[type]} db        [数据库]
         * @param {[type]} storename [名称]
         * @param {[type]} data      [值]
         */
        addData: function(db, storename, data) {
            var store  = db.transaction(storename, 'readwrite').objectStore(storename),
                request;
            for (var i = 0; i < data.length; i++) {
                request = store.add(data[i]);
                request.onerror = function() {
                    console.error('add添加数据库中已有该数据')
                };
                request.onsuccess = function() {
                    console.log('add添加数据已存入数据库')
                };
            }

        },
        /**
         *  添加数据，重复添加会更新原有
         * @param  {[type]} db        [description]
         * @param  {[type]} storename [description]
         * @param  {[type]} data      [description]
         * @return {[type]}           [description]
         */
        putData: function(db, storename, data) {
           debugger;
            var store = store = db.transaction(storename, 'readwrite').objectStore(storename),
                request;
            for (var i = 0; i < data.length; i++) {
                request = store.put(data[i]);
                request.onerror = function() {
                    console.error('put添加数据库中已有该数据')
                };
                request.onsuccess = function() {
                    console.log('put添加数据已存入数据库')
                };
            }
        },
        /**
         * 根据存储空间的键找到对应数据
         * @param  {[type]} db        [description]
         * @param  {[type]} storename [description]
         * @param  {[type]} key       [description]
         * @return {[type]}           [description]
         */
        getDataByKey: function(db, storename, key) {
            var store = db.transaction(storename, 'readwrite').objectStore(storename);
            var request = store.get(key);
            request.onerror = function() {
                console.error('getDataByKey error');
            };
            request.onsuccess = function(e) {
                var result = e.target.result;
                console.log('查找数据成功')
                console.log(result);
            };
        },
        deleteData: function(db, storename, key) {
            //删除某一条记录
            var store = store = db.transaction(storename, 'readwrite').objectStore(storename);
            store.delete(key)
            console.log('已删除存储空间' + storename + '中' + key + '记录');
        },
        clearData: function(db, storename) {
            //删除存储空间所有记录
            var store = db.transaction(storename, 'readwrite').objectStore(storename);
            store.clear();
            console.log('已删除存储空间' + storename + '所有记录');
        }
    }
    var students = [{
        id: 1001,
        name: "Byron",
        age: 24
    }, {
        id: 1002,
        name: "Frank",
        age: 36
    }, {
        id: 1003,
        name: "Aaron",
        age: 26
    }];

    INDEXDB.openDB(myDB.name, myDB.version);
    setTimeout(function() {
       /* console.log('****************添加数据****************************');
        INDEXDB.addData(myDB.db, myDB.ojstore.name, students);*/
        /* console.log('******************add重复添加**************************');
         INDEXDB.addData(myDB.db,myDB.ojstore.name,students);*/
        /* console.log('*******************put重复添加*************************');
         INDEXDB.putData(myDB.db,myDB.ojstore.name,students);*/
         console.log('*******************获取数据1001*************************');
         INDEXDB.getDataByKey(myDB.db,myDB.ojstore.name,1001);
        // console.log('******************删除数据1001************');
        // INDEXDB.deleteData(myDB.db,myDB.ojstore.name,1001);
        // console.log('******************删除所有数据************');
        // INDEXDB.clearData(myDB.db,myDB.ojstore.name);
        // console.log('******************关闭数据库************');
        // INDEXDB.closeDB(myDB.db);
        // console.log('******************删除数据库************');
        // INDEXDB.deletedb(myDB.name);
    }, 800)










    </script>
</body>

</html>