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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。