将数据库从办事器移到阅读器--indexedDB根本操纵封装-

发布时间：08/01 来源：未知浏览：关键词：

数据库是属于办事器的，这是理所当然的事，但是有时候数据或许并非需要存储在办事器，但是这些数据也是一条一条的记载，怎么办？今天来率领你领会一下H5的一个新特性--indexedDB的风骚。你会哑然失笑的发出感慨--难以想象！一、链接数据库indexedDB没有新建数据库的概念，你可以直接链接数据库，要是你链接的数据库并不存在，那么会主动的新建一个数据库。看下面的这个例子。< 　　数据库是属于办事器的，这是理所当然的事，但是有时候数据或许并非需要存储在办事器，但是这些数据也是一条一条的记载，怎么办？今天来率领你领会一下H5的一个新特性--indexedDB的风骚。你会哑然失笑的发出感慨--难以想象！

一、链接数据库

　　indexedDB没有新建数据库的概念，你可以直接链接数据库，要是你链接的数据库并不存在，那么会主动的新建一个数据库。看下面的这个例子。

Document《script》// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功！');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败！');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                success(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功，旧的版本号为：'+oldVersion+",新的版本号为："+newVersion);
            }
   }
   window.onload=function(){
           let btn  = document.getElementById('conbtn');
           btn.onclick = function(){
               connectDB('haha',1,function(){
                   console.log('链接成功，或者更新成功回调函数');
               },function(){
                   console.log('链接失败回调函数！')
               });
           }
   }《script》

　　我点了两次链接数据库，效果是这样的。

　　可以看到haha数据库已经成功创立了。

　　indexedDB的open办法用来链接或者更新数据库，首先次新建也以为是一次更新。首先个参数是数据库的名字，第二个参数为版本号。首先次新建或者版本号产生转变时动身更新事件upgradeneeded，链接成功后动身success事件，链接出错时触发error事件。

二、建表和索引

Document《script》// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,update,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功！');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败！');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                update(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功，旧的版本号为：'+oldVersion+",新的版本号为："+newVersion);
            }
   }       function createTable(idb,storeName,key,idxs){if(!idb){
            console.log(idb);return ;
        }if(!key || !idxs){
            console.log('参数差错');return ;
        }if(!storeName){
            console.log('storeName必需');return ;
        }try{var store = idb.createObjectStore(storeName,key);
            console.log('数据库存储对象(table)新建成功');for(var i = 0;i

　　我点了一下按钮效果时这样的。

　　这里用到的两个中心办法时createObjectStore，和createIndex,这两个办法必需在数据库产生更新的事件中施行。

　　createObjectStore办法可以了解成是新建表，承受首先个参数为一个字符串，表示表名，第二个参数是一个对象，指定主键相干的东西，{keyPath:'主键是哪个字段',autoIncrement:可否自增}。

　　createIndex办法是新建索引的，承受三个参数，首先个是一个字符串，表示索引的名字，第二个参数表示字段名（谁的索引），第三个参数是个对象，概括本人查去。索引的作用是在查询操纵时可以用到，不详讲，自行google吧。

三、增加数据

Document《script》// In the following line, you should include the prefixes of implementations you want to test.    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   // DON'T use "var indexedDB = ..." if you're not in a function.
   // Moreover, you may need references to some window.IDB* objects:   window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
   window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
   function connectDB(name,version,success,update,error){
         let dbConnect = indexedDB.open(name,version);
              dbConnect.onsuccess = function(e){
                  console.log('数据库链接成功！');
                success(e.target.result);            
            }
            dbConnect.onerror = function(e){
                console.log('数据库链接失败！');
                error(e);
            }
            dbConnect.onupgradeneeded = function(e){
                update(e.target.result);
                let oldVersion = e.oldVersion;
                let newVersion = e.newVersion;
                console.log('数据库更新成功，旧的版本号为：'+oldVersion+",新的版本号为："+newVersion);
            }
   }       function createTable(idb,storeName,key,idxs){if(!idb){
            console.log(idb);return ;
        }if(!key || !idxs){
            console.log('参数差错');return ;
        }if(!storeName){
            console.log('storeName必需');return ;
        }try{var store = idb.createObjectStore(storeName,key);
            console.log('数据库存储对象(table)新建成功');for(var i = 0;i

　　查询操纵主要用到了游标，这个提及来还比拼多，没工夫说了，自行google。还有许多的操纵这里不讲了。给一个我封装的不是非常不错的简易库，仅供参照。

　　　一个简易库。

(function(window){'use strict';
    window.dbUtil={
    indexedDB :(window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB),

    IDBTransaction :(window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction),

    IDBKeyRange :(window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange),

    IDBCursor : (window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor),            
    idb:null,
    dbName:"",
    dbVersion:"",/**
     * 初始化数据库，新建表和创立链接
     * @param  {[type]} dbName    [description]
     * @param  {[type]} dbVersion [description]
     * @param  {[type]} storeObjs [description]
     * @return {[type]}           [description]     */initDB:function (dbName,dbVersion,storeObjs){this.dbName = dbName;this.dbVersion = dbVersion;var dbConnect = this.indexedDB.open(this.dbName,this.dbVersion);var self = this;
        dbConnect.onsuccess = function(e){
            self.idb = e.target.result;
            self.log('数据库链接成功！');                
        }
        dbConnect.onerror = function(e){
            console.log(e)
            self.log('数据库链接失败!');
        }
        dbConnect.onupgradeneeded = function(e){
            self.idb = e.target.result;var ts = e.target.transaction;var oldVersion = e.oldVersion;var newVersion = e.newVersion;
            self.log('数据库更新成功，旧的版本号为：'+oldVersion+",新的版本号为："+newVersion);if(storeObjs){for(var k = 0,len=storeObjs.length;k 
五、运用indexedDB的优缺陷
　　1、长处：可以将一些数据放到阅读器端，不消和办事器交互就可以实现一些功能，减轻办事器承担，加速相应速度。
　　2、缺陷：
　　(1)不成靠：会员可能删处indexedDB，并且改换阅读器或者设施后这些数据就没了。
　　2）未便于数据采集：有许多时候将数据存到办事器是为了获得一些数据，要是放到阅读器端，这些数据比拼难猎取。
　（3）没法同享：不一样会员没方法同享数据，甚至时一个设施的不一样阅读器也无法同享。
　　所以，可否适用indexedDB要进行一下利弊权衡，不是有了indexedDB就啥也无论，一骨脑将数据放进去。 
　　
　　比来两个课程设计，还有面试， 文章写的比拼慌忙，若有题目请各位园友批判指正。比来寻实习，各位园友如果我写的东西还可以并且企业聘请实习生的话可以给大熊一个时机，感谢！
以上就是将数据库从办事器移到阅读器--indexedDB根本操纵封装的细致内容，更多请关注 百分百源码网 其它相干文章！