html5 indexDB的使用

   2023-02-08 学习力0
核心提示:angular.module('indexdb', []).factory('indexDbJs', [function() {const CurDBVersion = 10000;window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;window.IDBTransaction = window.IDBTra
angular.module('indexdb', [])
    .factory('indexDbJs', [function() {
        const CurDBVersion = 10000;

        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
        window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
        window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
        window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
        var db = {
            dbName: 'macImDb',
            obj: {},
            dbInstance: {},
            errorHandler: function(error) {
                // console.log('error: ' + error.target.error.message);
            },
            // 打开数据库,没有则自动创建
            open: function(func, fail) {
                // var version = db.getdbVeision();
                if(db.dbName.indexOf('_')<0) {
                    console.error(db.dbName);
                    debugger;
                }
                var dbContent = window.indexedDB.open(db.dbName);
                // dbContent.onupgradeneeded = db.upgrade;
                // dbContent.onerror = db.errorHandler;
                dbContent.onsuccess = function(e) {
                    // console.log('打开成功');
                    var _db = e.target.result;
                    db.dbInstance = dbContent.result;
                    db.dbInstance.onerror = function() {

                    };
                    func();
                    _db.close();

                };
                dbContent.onerror = function(e) {
                    var _db = e.target.result;
                    // console.log('打开不成功');
                    _db.close();
                };
                dbContent.onupgradeneeded = function(e) {
                    // console.log('更新');
                    var _db = e.target.result;
                    _db.close();
                };
                dbContent.onblocked = (e)=>{
                  console.log("onblocked");
                };

            },
            // 关闭数据库
            closeDB: function(db) {
                db.close();
            },
            // 创建数据表
            createStore: function(storeInfo, indexInfo, callback) {
                var count = 0;
                db.obj.stname = storeInfo.stname;
                db.obj.indexInfo = indexInfo;
                //创建数据库
                //var version = db.getdbVeision() + 1;
                // console.log(version);
                // var req = window.indexedDB.open(db.dbName);
                // req.onsuccess = function(e) {
                // var version = e.target.result.version;
                var dbContent = window.indexedDB.open(db.dbName, CurDBVersion);
                // 判断数据库版本号是否更新``
                // dbContent.onupgradeneeded = db.upgrade;
                dbContent.onupgradeneeded = function(e) {
                    // console.log('更新了');
                    var _db = e.target.result,
                        names = _db.objectStoreNames;
                    // 此处可以创建多个表

                    // var name = db.obj.stname;
                    var name = storeInfo.stname;
                    if (!names.contains(name)) {
                        // console.log('chuagnjian');
                        var store = _db.createObjectStore(
                            db.obj.stname, {
                                keyPath: 'id',
                                autoIncrement: true
                            });
                        // 如果创建数据表时传过来的索引信息不为空则创建索引
                        if (db.obj.indexInfo && db.obj.indexInfo.length !== 0) {
                            for (var i = 0; i < db.obj.indexInfo.length; i++) {
                                var req = store.createIndex(db.obj.indexInfo[i].indexName, db.obj.indexInfo[i].index, { unique: false });
                                req.onsuccess = function() {
                                    count++;
                                    if (count >= indexInfo.length) {
                                        callback(true);
                                        _db.close();
                                    }
                                };

                            }
                        } else {
                            callback(true);
                            _db.close();
                        }

                    } else {
                        callback(true);
                        _db.close();
                    }
                },
                    // 创建数据库成功事件
                    dbContent.onsuccess = function(e) {
                        var _db = e.target.result;
                        // console.log('创建成功');
                        db.dbInstance = dbContent.result;
                        callback(true);
                        _db.close();
                    },
                    // 创建数据库成功事件
                    dbContent.onerror = function() {
                        // var _db = e.target.result;
                        // console.log('创建失败');
                        // callback(false);
                        // _db.close();
                        // console.log(333);
                    };
                    // }

            },
            /**
             * 设置数据库名称
             * @param dbname 数据库名称
             */
            setDbName: function(dbname){
                db.dbName = dbname;
            },
            /**
             * 创建数据库和表
             * @param storeInfo 表
             * @param indexInfo 索引
             * @param callback 回调
             * @constructor
             */
            CreateStores: function(storeInfo, indexInfo, callback) {
                // db.obj.stname = storeInfo.stname;
                db.obj.indexInfo = indexInfo;
                var count = 0;
                //创建数据库
                //var version = db.getdbVeision();
                // console.log(version);
                // var req = window.indexedDB.open(db.dbName);
                // req.onsuccess = function(e) {
                // var version = e.target.result.version;
                var dbContent = window.indexedDB.open(db.dbName, CurDBVersion);
                // console.log(dbContent.getVesdion)
                // 判断数据库版本号是否更新``
                // dbContent.onupgradeneeded = db.upgrade;
                dbContent.onupgradeneeded = function(e) {
                    // console.log('更新了');
                    var _db = e.target.result,
                        names = _db.objectStoreNames;
                    // 此处可以创建多个表
                    // var arr = ['dtt1', 'dttt2', 'dttt3'];
                    for (var i = 0; i < storeInfo.length; i++) {
                        var name = storeInfo[i].stname;
                        if (!names.contains(name)) {
                            var store = _db.createObjectStore(
                                name, {
                                    keyPath: 'id',
                                    autoIncrement: true
                                });
                            // 如果创建数据表时传过来的索引信息不为空则创建索引
                            if (db.obj.indexInfo[i] && db.obj.indexInfo[i].length !== 0) {
                                for (var j = 0; j < db.obj.indexInfo[i].length; j++) {
                                    store.createIndex(db.obj.indexInfo[i][j].indexName, db.obj.indexInfo[i][j].index, { unique: false });
                                }
                                count++;

                            }

                        } else {
                            // callback(true);
                            // db.closeDB('macImDb');

                            //检测是否有索引更新的
                            var store = dbContent.transaction.objectStore(name);
                            for (var j = 0; j < db.obj.indexInfo[i].length; j++) {
                                if (!store.indexNames.contains(db.obj.indexInfo[i][j].indexName))
                                {
                                    store.createIndex(db.obj.indexInfo[i][j].indexName, db.obj.indexInfo[i][j].index, {unique: false});
                                }
                            }

                        }
                    }
                    if (count >= storeInfo.length) {
                        callback(true);
                    }


                    },
                    // 创建数据库成功事件
                    dbContent.onsuccess = function(e) {
                        db.dbInstance = dbContent.result;
                        callback(true);

                        // db.closeDB('macImDb');
                        // db.dbInstance.onerror = null;
                        // console.log(db);
                    },
                    // 创建数据库失败事件
                    dbContent.onerror = function() {
                        callback(false);

                    };
                    // }


            },
            // 获得数据表
            getObjectStore: function(objectStoreName, mode) {
                var txn, store;
                mode = mode || 'readonly';
                txn = db.dbInstance.transaction([objectStoreName], mode);

                store = txn.objectStore(objectStoreName);
                return store;
            },
            // 当数据库版本更新时创建数据表
            upgrade: function(e) {
                // console.log('更新了');
                var _db = e.target.result,
                    names = _db.objectStoreNames;
                // 此处可以创建多个表
                var name = db.obj.stname;
                // console.log(db.obj.stname);
                // console.log(name);
                if (!names.contains(name)) {
                    var store = _db.createObjectStore(
                        db.obj.stname, {
                            keyPath: 'id',
                            autoIncrement: true
                        });
                    // 如果创建数据表时传过来的索引信息不为空则创建索引
                    if (db.obj.indexInfo && db.obj.indexInfo.length !== 0) {
                        for (var i = 0; i < db.obj.indexInfo.length; i++) {
                            store.createIndex(db.obj.indexInfo[i].indexName, db.obj.indexInfo[i].index, { unique: false });
                        }
                    }

                }
            },
            // 添加数据(不负责创建表)
            addStore: function(objectStoreName, data, callback) {
                // 如果此处是数组在此函数内部循环,而不是循环调用add函数是否会快点。
                        db.open(function() {
                            var store, req, mode = 'readwrite';
                            var addNum = 0;
                            store = db.getObjectStore(objectStoreName, mode);
                            for (var i = 0; i < data.length; i++) {
                                var req = store.add(data[i]);
                                req.onsuccess = function() {
                                    addNum++;
                                    if (addNum >= data.length) {
                                        callback(true);
                                    }
                                };
                                req.onerror = function() {
                                    callback(false);
                                };
                            }
                            //     req = store.add(data);
                            // req.onsuccess = function() {
                            //     console.log('add');
                            // };
                            // req.onerror = fail;
                        });

            },
            //  添加数据(发现没有表则创建表)
            add: function(type, userId, objectStoreName, indexInfo, data, callback) {
                // console.log(objectStoreName);
                // console.log(data);
                if (type !== null) {
                    objectStoreName = type + userId;
                }
                // console.log('add');
                // indexDbJs.createStore({ stname: 'dt1' }, [], function(data) {
                //     console.log(data);
                // })
                db.createStore({ stname: objectStoreName }, indexInfo, function(result) {
                    if (result === true) {
                        // console.log(true);
                        // 如果此处是数组在此函数内部循环,而不是循环调用add函数是否会快点。
                        db.open(function() {
                            var store, req, mode = 'readwrite';
                            var addNum = 0;
                            store = db.getObjectStore(objectStoreName, mode);
                            for (var i = 0; i < data.length; i++) {
                                var req = store.add(data[i]);
                                req.onsuccess = function() {
                                    addNum++;
                                    if (addNum >= data.length) {
                                        callback(true);
                                    }
                                };
                                req.onerror = function() {
                                    callback(false);
                                };

                            }
                        });
                    }
                });
            },
            //更新数据表
            update: function(objectStoreName, data, callback) {
                db.open(function() {
                    var store, req, mode = 'readwrite';
                    var updateNum = 0;
                    store = db.getObjectStore(objectStoreName, mode);
                    if (data.length == 0) {
                        if (callback) {
                            callback(true);
                        }
                    }
                    for (var i = 0; i < data.length; i++) {
                        var req = store.put(data[i]);
                        req.onsuccess = function() {
                                updateNum++;
                                if (updateNum >= data.length) {
                                    if (callback) {
                                        callback(true);
                                    }
                                }
                            },
                            req.onerror = function() {
                                if (callback) {
                                    callback(true);
                                }
                            };
                    };

                });
            },
            // 通过id查找数据(不加游标)
            selectDataById: function(objectStoreName, id, callback) {
                db.open(function() {
                    var store = db.getObjectStore(objectStoreName),
                        req = store.get(id);
                    req.onsuccess = function(e) {
                        if (!e.target.result) {
                            return callback(null);
                        }
                        callback(e.target.result);
                    };
                    req.onerror = function() {
                        callback(false);
                    };
                });

            },
            // 通过自己创建的索引查找数据(不加游标)
            selectSingleDataByIndex: function(objectStoreName, indexName, data, callback) {
                db.open(function() {
                    var store = db.getObjectStore(objectStoreName);
                    var index = store.index(indexName);
                    var result = [];
                    var count = 0
                    for (var i = 0; i < data.length; i++) {
                        // count++;
                        index.get(data[i]).onsuccess = function(e) {

                            count++;
                            if (e.target.result) {
                                result.push(e.target.result);
                            }

                            if (count >= data.length) {
                                callback(result);
                            }
                        }
                    }
                });

            },
            //  通过自己创建的索引查找数据(增加游标)
            // selectDataByIndex: function(objectStoreName, indexName, searchData, callback) {
            //     db.open(function() {
            //         var store = db.getObjectStore(objectStoreName);
            //         var index = store.index(indexName);
            //         var data = [];
            //         var request = index.openCursor(IDBKeyRange.only(searchData))
            //         request.onsuccess = function(e) {
            //             var cursor = e.target.result;
            //             if (cursor) {
            //                 var result = cursor.value;
            //                 data.push(result);
            //                 // console.log(data);
            //                 if(result&&result!==null){

            //                    cursor.continue();
            //                  }else{

            //                  }
            //                 // console.log(result);
            //             }else {
            //                 callback(data);
            //             }
            //         },
            //         request.onerror = callback(false);

            //     });

            // },
            // 通过自己创建的索引查找数据(增加游标)
            selectDataByIndex: function(objectStoreName, indexName, searchData, callback) {
                    console.log('查询数据,通过自己的索引');
                db.open(function() {
                     console.log('查询数据库');
                    var store = db.getObjectStore(objectStoreName);
                    var index = store.index(indexName);
                    var data = [];
                     console.log(searchData);
                    var cursor = index.openCursor(IDBKeyRange.only(searchData));
                    cursor.onsuccess = function(e) {
                            if (e.target.result) {
                                var result = e.target.result.value;
                                // var result = result.value;
                                // console.log(result);
                                data.push(result);
                                // console.log(data);
                                if (result && result !== null) {
                                    e.target.result.continue();
                                } else {
                                     console.log(result);
                                }
                                // console.log(result);
                            } else {
                                callback(data);
                            }
                        },
                        cursor.onerror = function() {
                            callback(false);
                        };

                });

            },
            // 根据索引删除数据
            deleteDataByIndex: function(objectStoreName, indexName, searchData, callback) {
                 console.log('查询数据');
                db.open(function() {
                     console.log('查询数据库');
                    var store = db.getObjectStore(objectStoreName, 'readwrite');
                    var index = store.index(indexName);
                    var data = [];
                    var cursor = index.openCursor(IDBKeyRange.only(searchData));
                    cursor.onsuccess = function(e) {
                            if (e.target.result) {
                                var result = e.target.result.value;
                                // var result = result.value;
                                 console.log(result);
                                store.delete(result.id);
                                // console.log(data);
                                if (result && result !== null) {
                                    e.target.result.continue();
                                } else {

                                }
                                // console.log(result);
                            } else {
                                if(callback){
                                  callback(true);
                                }

                            }
                        },
                        cursor.onerror = function() {
                            callback(false);
                        };

                });

            },
            deleteDataById: function(objectStoreName, id, callback) {
                db.open(function() {
                    var
                        mode = 'readwrite',
                        store, req;
                    store = db.getObjectStore(objectStoreName, mode);
                    // console.log('要删除的id'+id);
                    // console.log(typeof id);
                    req = store.delete(id);
                    req.onsuccess = function(){
                        // console.log('删除ok');
                        callback(true);
                    };
                    req.onerror = function(){
                        callback(false);
                    };
                });

            },


            // 根据id范围获取数据
            selectDataByIdRange: function(objectStoreName, indexName, startId, endId, callback) {
                db.open(function() {
                    var store = db.getObjectStore(objectStoreName);
                    var index = store.index(indexName);
                    var boundKeyRange = IDBKeyRange.bound(startId, endId, false, true);
                    var data = [];
                    // req = store.get(id);
                    index.openCursor(boundKeyRange).onsuccess = function(event) {
                        var cursor = event.target.result;
                        if (cursor) {
                            // Do something with the matches.
                            // console.log(cursor.value);
                            data.push(cursor.value);
                            cursor.continue();
                        } else {
                            callback(data);
                        }

                    }
                });
            },
            // 获得一个数据表的所有数据
            selectAll: function(objectStoreName, callback) {

                db.open(function() {
                    var
                        store = db.getObjectStore(objectStoreName),
                        cursor = store.openCursor(),
                        data = [];

                    cursor.onsuccess = function(e) {
                        var result = e.target.result;
                        if (result && result !== null) {
                            data.push(result.value);
                            result.continue();
                            // callback(data);
                        } else {

                            callback(data);

                        }

                    };
                    cursor.onerror = function() {
                        callback(false);
                    };

                });
            },
            // 清空某个数据表
            // deleteAllDate: function(dbName,objectStoreName) {
            //   var version=db.getdbVeision()
            //   db.open(dbName);
            // },
            // 删除某个数据表
            // deleteStore: function(objectStoreName) {
            //     db.open(function() {
            //         // if (db.objectStoreNames.contains(objectStoreName)) {
            //         db.deleteObjectStore(objectStoreName);
            //         // }
            //     });

            // },
            deleteAllStore: function(objectStoreName, success, fail) {

            },
            // 删除某个数据库
            deleteDB: function(dbName) {
                indexedDB.deleteDatabase(dbName);
            },
            // 获得数据库当前版本
            getdbVeision: function() {
                var dbVersion = parseInt(localStorage.getItem("dbVersion")) || 1;
                dbVersion++;
                localStorage.setItem("dbVersion", dbVersion);
                return dbVersion;
                // return +new Date();
            }
        };
        return db;
    }]);

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • HTML中将背景颜色渐变 html设置背景颜色渐变
    通过使用 css3 渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到css3所以需要考虑下浏览器兼容问题,例如:从左到右的线性渐变,且带有透明度的样式:#grad {background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*
    03-08
  • html5 Canvas 如何自适应屏幕大小
    但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。 html代码 canvas width="300" height="300" id="myCanvas"/canvas设置样式 * {
    03-08
  • Vue中出现Do not use built-in or reserved HTML elements as component id:footer等等vue warn问题
    Vue中出现Do not use built-in or reserved HTM
    错误示图:原因:是因为在本地项目对应文件的script中,属性name出现了错误的命名方式,导致浏览器控制台报错!  诸如: name: header 、  、 name: menu , 等等都属于错误的命名方式等 错误代码命名如下:解决办法:办法1: 如果我们采用正确命名
    03-08
  • HTML在网页中插入音频视频简单的滚动效果
    HTML在网页中插入音频视频简单的滚动效果
    每次上网,打开网页后大家都会看到在网页的标签栏会有个属于他们官网的logo,现在学了HTML了,怎么不会制作这个小logo呢,其实很简单,也不需要死记硬背,每当这行代码出现的时候能知道这是什么意思就ok1 link rel="shortcuticon" type="image/x-icon" href="
    03-08
  • HTML的video标签,不能下载视频代码
    !-- 在线视频不能下载代码 --!DOCTYPE html html headscript src="../Demo/demo/book/JQuery/jQuery v2.2.0.js"/script/headbody div style="text-align:center;"video src="../images/PreviewVideo.mp4" width="820"controls="controls&
    03-08
  • ThinkPHP报错 The requested URL /admin/index/login.html was not found on this server.
    ThinkPHP报错 The requested URL /admin/index/
           解决方案在入口文件夹public下查看.htaccess是否存在。不存在则新建,存在的话,那内容替换为下面这串代码 就可以解决Not Fund#IfModule mod_rewrite.c#Options +FollowSymlinks -Multiviews#RewriteEngine On##RewriteCond %{REQUEST_FILENAME
    03-08
  • HTML特殊字符、列表、表格总结 html特殊符号对
            HTML实体字符  在HTML中一些特殊的字符需要用特殊的方式才能显示出来,比如小于号、版权等,  在课堂上老师教了我们一个有点意思的:空格,在教材上字符实体是“nbsp”通过老师  的演示我们发现不同的浏览器他所显示的效果不同,有的比
    03-08
  • 【JavaScript】使用document.write输出覆盖HTML
    您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法,会覆盖整个文档。分析HTML输出流是指当前数据形式是HTML格式的数据,这部分数据正在被导出、传输或显示,所以称为“流”。通俗的来说就是HTML文档的加载过程,如果遇到document.writ
    03-08
  • ASP.Net MVC 控制@Html.DisplayFor日期显示格式
    在做一個舊表的查詢頁時,遇到一個問題:字段在db里存儲的是DATETIME,但保存的值只有日期,沒有時間數據,比如2018/2/26 0:00:00,顯示出來比較難看,當然也可以做一個ViewModel,在字段上添加Attribute定義來更改名稱和顯示名稱,如下:[Display(Name = "建
    03-08
  • html 基础代码
    title淄博汉企/title/headbody bgcolor="#00CC66" topmargin="200" leftmargin="200" bottommargin="200"a name="top"/a今天br /天气nbsp;nbsp;nbsp;nbsp;nbsp;不错br /font color="#CC0000"格式控制标签br /b 文字加粗方式1\bbr /str
    03-08
点击排行