精华内容
下载资源
问答
  • 包括各种性能和兼容性优化: 在Web Worker中运行,这样数据库操作不会,并使用进行。 延迟加载记录,然后将其保存在内存中。 主键在全球范围内是唯一的,从而解决了一些。 $ npm install fortune-indexeddb 用法...
  • 余烬索引数据库 该插件提供了可用于基于IndexedDB的实用程序。 它提供: 用于配置数据库和迁移/升级的服务 ...兼容性 Ember.js v3.16或更高版本 Ember CLI v2.13或更高版本 Node.js v10或更高版本
  • indexedDB开坑

    2019-11-20 16:13:34
    indexedDB开坑示例连接,新建数据库新建表,主键(自增),索引(唯一)增删改查:关闭/删除数据库 示例 //兼容 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window....

    示例

        //兼容
        window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
        if(!window.indexedDB){
            console.log("浏览器不支持indexedDB~");
        }
        //全局变量
        var db,dbName = "demoDB",dbVersion = 1;//数据库版本号必须正整数
        var dbStoreConf = {//数据表配置,单主键
            title:"demoChart",
            keyPath : "id",//主键
            autoIncrement:true,//主键自增
            index:[{//索引
                indexName:"nickname",//索引名
                colName:"nickname",//列名
                unique:true//唯一性
            },{
                indexName:"age",
                colName:"age",
                unique:false
            }]
        }
        //创建、连接INDEXEDDB
        var IDBOpenDBRequest = window.indexedDB.open(dbName,dbVersion);
        IDBOpenDBRequest.onerror = function(e){
            console.log("创建失败~!"+ e.target.errorCode)
        }
        IDBOpenDBRequest.onsuccess = function(e){
            db = this.result;//不用“IDBOpenDBRequest.result”,利于垃圾回收
            console.log("创建成功~!")
        }
        IDBOpenDBRequest.onupgradeneeded = function(e){//第一次连接或更新版本号时触发,早于onsuccess
            db = this.result;
            // if(!db.objectStoreNames.contains(dbStoreConf.title)){
            //创建表、主键:(表名, {主键名, 自增})
            var store = db.createObjectStore(dbStoreConf.title,{
                keyPath:dbStoreConf.keyPath,
                autoIncrement:dbStoreConf.autoIncrement
            });
            //索引:(索引名, 列名, {唯一性})
            if(dbStoreConf.index && dbStoreConf.index.length > 0){
            	dbStoreConf.index.map(e=>{
                	store.createIndex(e.indexName,e.colName,{unique:e.unique});
            	})        
            }
            // }
            console.log("数据库" + dbName + "版本:" + dbVersion);
        }
    
        //关闭数据库
        function close(){
            if(!db){
                return;
            }
            db.close();
        }
        
        //清空数据库
        function clear(){
            if(!db){
                return;
            }
            db.clear();
        }    
    
        //删除数据库
        function delDB(){
            if(!db){
                return;
            }
            close();//先关闭,才能删除
            var delDBRequest = window.indexedDB.deleteDatabase(dbName);
            delDBRequest.onsuccess = function(){
                console.log("删库成功~!")
            }
            delDBRequest.onerror = function(){
                console.log("删库失败~!")
            }
        }
    
        //创建事务,操作数据库仓库对象
        function add(data){//data不包含ID,创建时ID自增
            optDB("add",data)
        }
    
        function del(primaryKey){//主键
            optDB("delete",primaryKey)
        }
    
        function update(data){//data包含ID,会更新数据
            optDB("put",data)
        }
    
        function getByKeyPath(primaryKey){//主键查找
            optDB("get",primaryKey)
        }
    
        // 可以继续优化,精简代码
        function getByIndex(indexKey,data){//索引查找
            if(!db || !data){
                return;
            }
            var request = db.transaction(dbStoreConf.title,"readwrite").objectStore(dbStoreConf.title).index(indexKey)[`${method}`](data);
            request.onsuccess = function(e){
                console.log(method + "成功~!")
                // callback(e.target.result)
            }
            request.onerror = function(e){
                console.log(method + "失败~!")
            }
        }
    
        function optDB(method,data,callback){
            if(!db || !data){
                return;
            }
            //新建事务
            var request = db.transaction(dbStoreConf.title,"readwrite").objectStore(dbStoreConf.title)[`${method}`](data);
            request.onsuccess = function(e){
                console.log(method + "成功~!")
                // callback(e.target.result)
            }
            request.onerror = function(e){
                console.log(method + "失败~!")
            }
        }
    
        add({nickname:"lxy",age:17});
        del(1);
        update({id:1,nickname:"lxx",age:18});
        getByKeyPath(1);
        getByIndex("age",18);
    

    连接,新建数据库

    window.indexedDB.open('dbName',dbVersion)
    版本号必须为正整数

    新建表,主键(自增),索引(唯一性)

    window.indexedDB.open('dbName').result
    	.createObjectStore('chartName',{keyPath:'primaryKeyName',autoIncrement:true})
    	.createIndex('indexName','name',{unique:false});
    

    增删改查:

    var dbStore = window.indexedDB.open('dbName').result.transaction(['dbStoreName'],'readwrite').objectStore('dbStoreName');,事务中获取表,以及事务模式“readonly/read write/versionchange”;

    dbStore.add(data)添加单例数据;
    dbStore.delete(keyPath),删除唯一主键对应的数据
    dbStore.put(data),data数据中含有唯一主键,能在数据库中找到,更新到数据库;找不到就等同于add;
    dbStore.get().onsuccess通过主键获取后修改,put(data)更新数据;
    dbStore.index("indexName").get().onsuccess通过索引查找,获取后修改;
    dbStore.openCursor().onsuccess游标遍历数据,处理数据

        dbStore.openCursor().onsuccess = function(e){
            var item = e.target.result;
            if(!item){
                console.log("已遍历完成,没有数据了");
            }else{
                console.log(item);
            }
        }
    

    事务模式readonly可以多线程,readwrite只能单线程,versionchange才能新建/删除仓库或者索引

    关闭/删除数据库

    window.indexedDB.open('dbName',dbVersion).result.close()
    window.indexedDB.deleteDatabase('dbName')
    关闭后才能删除DB

    展开全文
  • 这个是session storage和local storage不如的,不过目前的兼容性一般。 /** * 用于存储大规模结构话数据用的。 * 一个数据库存放多个object store,相当于表的概念 */ function openDB(name, ca...

    在这里插入图片描述

    indexedDB

    indexedDB 一般用于存储大规模“结构化”数据,很明显,越结构化的数据,计算器处理起来会越容易,这也是其优势。这个是session storage和local storage不如的,不过目前的兼容性一般。

    /**
     * 用于存储大规模结构话数据用的。
     * 一个数据库存放多个object store,相当于表的概念
     */
    function openDB(name, callback) {
        // Create DB
        var request = window.indexedDB.open(name)
    
        request.onerror = function (e) {
            console.log('Open indexedDB error')
        }
    
        request.onsuccess = function (e) {
            myDB.db = e.target.result
            console.log(myDB.db)
    
            callback && callback()
        }
        // 1. 监听数据库中的数据的版本变化
        // 2. 如果数据库没有存在,用于初始化数据版本
        request.onupgradeneeded = function () {
    
            // 数据库的存储格式为 key-object 形式,一个key值对应一个object对象。
            var store = request.result.createObjectStore('books', {
                keyPath: 'isbn'
            })
    
            // 简历索引
            var titleIndex = store.createIndex('by_title', 'title', {
                unique: true
            })
    
            var authorIndex = store.createIndex('by_author', 'author')
    
            store.put({
                isbn: 1,
                title: 'Sherok homers',
                author: 'Asir'
            })
    
            store.put({
                isbn: 2,
                title: 'Fire',
                author: 'Crown',
            })
        }
    }
    
    var myDB = {
        name: 'testDB',
        version: '1',
        db: null
    }
    
    openDB(myDB.name, function () {
        // myDB.db.close();
        // window.indexedDB.deleteDatabase(myDB.name)
    })
    
    function dataActions(db, storeName) {
        // object store
        var transaction = db.transaction('books', 'readwrite')
        var store = transaction.objectStore('books')
    
        // Add
        store.add({
            isbn: 3,
            title: 'Flower',
            author: 'xiaoQiang'
        })
    
        // Delete
        store.delete(3)
    
        // Update
        store.put({
            isbn: 2,
            title: 'Fire',
            author: 'Crown'
        }).onsuccess = function (e) {
            console.log(e.target.result)
        }
    
        // Search
        store.get(2).onsuccess = function (e) {
            console.log(e.target.result)
        }
    
    }
    
    setTimeout(function () {
        dataActions(myDB.db)
    }, 3000)
    

    service workers

    使得前端开始有了多线程,拥有使用拦截和处理网络请求的能力,去实现一个离线应用。使用service worker在后台运行同时能和页面通讯的能力,去实现大规模后台数据的处理。

    • chrome://serviceworker-internals
    • chrome://inspect/#service-workers
    1. 对页面做离线化,可以对数据进行拦截
    2. 和主页面进行通信

    需要注意的是,service worker要在https的环境下才能生效,本定调试一定设置为localhost去调试。

    在这里插入图片描述

    Example

    https://github.com/clown-0726/service-worker-try

    展开全文
  • html5 IndexedDB

    千次阅读 2016-03-15 20:47:29
    indexedDB类似nosql的数据库,是面向索引的数据库,相对于web storage,它为web离线存储提供大数据存储和搜索。浏览器兼容性使用步骤 打开一个数据库 获取数据库对象 通过数据库打开一个事务 通过事务进行数据库结构...

    indexedDB类似nosql的数据库,是面向索引的数据库,相对于web storage,它为web离线存储提供大数据存储和搜索。

    浏览器兼容性

    这里写图片描述

    使用步骤

    1. 打开一个数据库
    2. 获取数据库对象
    3. 通过数据库打开一个事务
    4. 通过事务进行数据库结构和数据的操作

    操作数据之前,我们先建立一个数据库

    /**
      * 创建数据库
      */
    function createDB(){
      var openReq = window.indexedDB.open(dbName);
      openReq.onerror = function(ev){
      };
      openReq.onsuccess = function(ev){
          var db = ev.target.result ;
          tip.innerText = "数据库名称 : " + db.name;
      };
    }

    由于indexedDB数据库兼容性还不是很好,需要为各自的对象各自浏览器加上前缀,我们 可以按下面来做统一对象

    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;//indexDB对象
    
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // 事务对象
    
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; //key过滤对象

    创建的同时,我也要能删除数据库,我们可以这样子删除数据库

    /**
      * 删除数据库
      */
    function delDB(){
       var openReq = window.indexedDB.deleteDatabase(dbName);
       openReq.onerror = function(ev){
    
       };
       openReq.onsuccess = function(ev){
         tip.innerText = "删除数据库成功";
       };
    }

    上面的操作设计到如下方法和事件

    1. window.indexedDB 获取数据库对象
    2. open(dbName,version) 打开数据,是操作整个数据库的入口,第二个参数是version(long 型),它的作用对数据库进行版本控制,若要对数据库的接口和数据进行操作,必须让version版本号大于之前操作的版本号数

    indexedDB的数据库打开是异步操作,需要回调事件才确定打开接口,提供一下事件

    1. onerror 数据库打开失败的触发
    2. onsuccess 数据库打开成功触发
    3. onupgradeneeded version版本号和上一次操作版本号不一致触发,我们可以在里面对数据库进行数据结构和数据库进行操作,我们每次操作数据库的增删改查,都要确定version号比上次操作大,才能触发onupgradeneeded 进行数据库操作

    三个事件都传事件对象到方法里面,可以通过事件对象获取数据库对象或者结果集,事务对象等等

    创建好了数据库之后,我们就来创建一个存储对象,你可以理解为关系数据库中的表,那下面我建一个消费者customers的表

    /**
      *创建一个存储对象
      */
    function createObjectStore(){
        var openReq = window.indexedDB.open(dbName,4); //只有改变版本号才能对该数据库结构和数据进行操作
        openReq.onsuccess = function(ev){
         tip.innerText = "创建存储对象成功";
       };
       openReq.onerror = function(ev){
         tip.innerText = "失败";
       };
       openReq.onupgradeneeded = function(ev){//版本号不同调发这个回调
          var db = ev.target.result ; //获取数据库对象
    
          //创建表名和主键
          var objectStore = db.createObjectStore("customers", { autoIncrement : true}); //创建存储对象,利用autoIncrement主键自动递增
    
          //创建字段索引,索引可以用来搜索,详细看后面
          objectStore.createIndex("uid","uid",{unique : true});
          objectStore.createIndex("age","age",{unique : false});
          objectStore.createIndex("name", "name", { unique: false }); 
      };
    }

    该创建步骤设计到以下方法

    1. createObjectStore(dbName,primaryKey) 创建一个存储对象
    2. createIndex(colunmName,indexName,option) 创建一个字段索引

    创建primaryKey的时候有俩种方式

    1. 自动递增的主键策略,如{ autoIncrement : true},
    2. 拿索引字段中的一个不重复的索引作为主键的策略,如{ keyPath: “uid” }

    俩种的区别,是在更新的时候,”1”的策略,不会更新数据,而是直接向数据库重新插入一条数据,因为主键key每次都是递增不相同。”2”的策略会直接更新数据

    createIndex不需要为每个字段建立索引,只需建立你需要的索引就可以了,例如我们把下面的数据类型插到数据库中

    const customerData = [ //数据类型json,可以把key理解为字段,建立索引的时候,没必要为每个字段建立索引
      { uid: "aaa", name: "根子", age: 15, email: "genzi@qq.com" },
      { uid: "bbb", name: "花子", age: 11, email: "mingzi@qq.com" }
    ];
    
    /**
      * 添加一条数据
      */
    function addData(){
    
       var req = window.indexedDB.open(dbName,15);
       req.onupgradeneeded = function(ev){
          var db = ev.target.result ;
          var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ_WRITE); //获取事务
          transaction.oncomplete = function(ev){
            tip.innerText = "添加数据成功";
          };
          transaction.onerror = function(ev){
    
          };
          var objectStore = transaction.objectStore("customers");//获取事务型的存储对象
          for(var i in customerData){
             objectStore.add(customerData[i]);
          }
       } 
    }

    就像关系行数据库一样,在索引数据库中,我们也必须要加上事务控制,避免数据操作不一致。一般读数据,用IDBTransaction.READ,而写数据,我们用IDBTransaction.READ_WRITE关键字来标志

    下面我们把更新和删除也举例一下

    
    /**
      * 更新一条数据
      */
    function updateData(key,name,age,email){
       var req = window.indexedDB.open(dbName,++index);
       req.onupgradeneeded = function(ev){
    
          var db = ev.target.result;
          var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ_WRITE);
          var objstore = transaction.objectStore("customers");
          var getReq = objstore.get(key); //通过主键直接获取一个对象
    
          transaction.oncomplete = function(ev){
             tip.innerText = "更新数据成功";
          };
          transaction.onerror = function(ev){
          };
          getReq.onsuccess = function(){ //获取数据成功
             var obj = getReq.result; //获取数据对象
             obj.ssn = "343tt4343" ; 
             obj.name = name ; 
             obj.age = age ; 
             obj.email = email ; 
             objstore.put(obj);//更新数据,主键策略不同,更新结果也会不同
          }
       };
    }
    
    /**
      * 删除一条数据
      */
    function delData(){
      var req = window.indexedDB.open(dbName,++index);
      req.onupgradeneeded = function(ev){
          var db = ev.target.result;
          var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ_WRITE);
          var objstore = transaction.objectStore("customers");
          transaction.oncomplete = function(ev){
             tip.innerText = "删除数据成功";
          };
          transaction.onerror = function(ev){
    
          };
          objstore.delete(1);
       }
    }

    任何对数据库的增删改查,都需要加上事务获取事务型的存储对象,可以理解为关系型数据库中的表,先找表,再对表进行CRUD,下面来看看查询操作。

    get 通过primary key来获取数据对象

    /**
      * 更新一条数据
      */
    function findDataByKey(key){
       var req = window.indexedDB.open(dbName,++index);
       req.onupgradeneeded = function(ev){
    
          var db = ev.target.result;
          var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ_WRITE);
          var objstore = transaction.objectStore("customers");
          var getReq = objstore.get(key); //通过主键直接获取一个对象   
          getReq.onsuccess = function(){ //获取数据成功
             var obj = getReq.result; //获取数据对象,auto
             ...
          }
       };
    }

    openCursor 打开游标来遍历数据

    /**
      * 遍历获取全部数据
      */
    function retriving(){
    
       //1.打开数据库
       var req = window.indexedDB.open(dbName,++index);
    
       //2.判断成功,打开事务
       req.onupgradeneeded = function(ev){
           var db = ev.target.result; //获取数据库对象
           var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ); //打开事务
           var objstore = transaction.objectStore("customers");//获取操作存储对象
           var cursor = objstore.openCursor(); //打开游标
           cursor.onsuccess = function(ev){
              var result = ev.target.result ;
              if (result) {
                console.log("key = " + result.key + " -- name = " + result.value.name);
                result.continue(); //继续遍历
              }
              else {
                tip.innerText = "遍历完成";
              }
           }    
       }
    }

    index 通过索引来获取对象

    /**
      * 用index获取数据
      */
    function findByIndex(index){
       var req = window.indexedDB.open(dbName,++index);
       req.onupgradeneeded = function(ev){
           var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ); //打开事务
           var objstore = transaction.objectStore("customers");//获取操作存储对象
           var item = objstore.index("name"); //通过建立的name索引来获取对象
           item.get("lucy").onsuccess = function(event) {//获取匹配的一条数据
              tip.innerText = "lucy's SSN is " + event.target.result.ssn;
          };
       }
    }

    通过index获取的数据可能不只一条数据,如果是多条数据,我们也可以继续用游标进行遍历

    
    /**
      * 用indexcursor来变量列
      */
    function retrivingByIndexCusor(){
    
       var req = window.indexedDB.open(dbName,++index);
       req.onupgradeneeded = function(ev){
           var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ); //打开事务
           var objstore = transaction.objectStore("customers");//获取操作存储对象
           var item = objstore.index("name");
           item.openCursor().onsuccess = function(ev) {//打开 游标进行遍历
              var cursor = ev.target.result;
              if (cursor) {
                console.log( cursor.key + ", uuid: " + cursor.value.uuid+ ", email: " + cursor.value.email);
                cursor.continue();
              }
            };   
       }
    }

    IDBKeyRange 用来做指定获取数据的范围,类型关系型数据中start limit处理分页的一样

    /**
      * 利用keyRange来获取指定范围的的数据
      */
    function useIDBKeyRange(){
       var req = window.indexedDB.open(dbName,18);
       req.onupgradeneeded = function(ev){
           var transaction = ev.target.transaction || db.transaction(["customers"],IDBTransaction.READ); //打开事务
           var objstore = transaction.objectStore("customers");//获取操作存储对象
           var item = objstore.index("age");
    
           // 匹配唯一对象
            //var singleKeyRange = IDBKeyRange.only(15);
    
            // 匹配age大于15的那些对象,包括age=15那个对象
            //var lowerBoundKeyRange = IDBKeyRange.lowerBound(15);
    
            // 匹配age大于15的那些对象,不包括age=15那个对象
            //var lower BoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
    
            // 匹配age小于15的那些对象,不包括age=15那个对象
            var upperBoundOpenKeyRange = IDBKeyRange.upperBound(15);
    
            //匹配age在15和50中间的对象,不报错15但报错50
             //var boundKeyRange = IDBKeyRange.bound(15, 50, false, true);
             item.openCursor(upperBoundOpenKeyRange).onsuccess = function(ev) {
              var cursor = ev.target.result;
              if (cursor) {
                console.log( cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
                cursor.continue();
              }
            };  
       }
    }

    我们还可以通过”prev”来进行排序

    item.openCursor(upperBoundOpenKeyRange,"prev").onsuccess = function(ev) { //默认排序从小到大,prev能从大到小
              var cursor = ev.target.result;
              if (cursor) {
                console.log( cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
                cursor.continue();
              }
            }; 

    当有age获取数据有重复的时候,例如35岁的有很多个,我们可以通过”nextunique”获取唯一的一条数据

    item.openCursor(upperBoundOpenKeyRange,"nextunique").onsuccess = function(ev) { //默认排序从小到大,prev能从大到小
              var cursor = ev.target.result;
              if (cursor) {
                console.log( cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
                cursor.continue();
              }
            }; 

    博客参考
    https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

    展开全文
  • 具有可用IndexedDB。 这是一个很小的库(大约1.09k),主要反映了IndexedDB API,但是有一些小的改进,对可用产生了很大的影响。 安装 使用npm npm install idb 然后,假设您使用的是模块兼容的系统...
  • 2.看一下浏览器兼容性,手机兼容性略差。 3.简单建立页面,如下: 4.静态HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&...

    1.演练地址https://djz917.github.io/contact/indexDB/index.html

    2.看一下浏览器兼容性,手机兼容性略差。

    3.简单建立页面,如下:

    4.静态HTML代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.title {
    				background: #C0C0C0;
    				color: #888888;
    			}
    			.title th,td {
    				text-align: center;
    				padding: 4px 30px;
    			}
    			.content td{
    				border: 1px solid #000000;
    			}
    		</style>
    	</head>
    	<body>
    		<form action="" name="index">
    			姓名:<input type="text" name="name">
    			电话:<input type="text" name="phone">
    			地址:<input type="text" name="address">
    			<button type="button" class="create">添加</button>
    			<button type="button" class="delete">删除数据库</button><br /><br />
    			姓名:<input type="text" name="search">
    			<button type="button" class="search">查询</button>
    		</form>
    		<br />
    		<table id="table">
    			<tr class="title">
    				<th>姓名</th>
    				<th>电话</th>
    				<th>地址</th>
    				<th>删除</th>
    			</tr>
    		</tabel>
    	</body>
    </html>

    5.全局变量声明

    var indexedDb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
    var db,
    	index = 0,
    	arrayKey = [],
    	openRequest,
    	lastCursor,
    	createEle = document.querySelector('.create'),
    	searchEle = document.querySelector('.search'),
    	deleteBtn = document.querySelector('.delete'),
    	dbName = "person",
    	tableName = "textTable";
    createEle.addEventListener('click', add);
    searchEle.addEventListener('click', seletDB);
    deleteBtn.addEventListener('click', deleteDB);
    init(tableName);

    6.打开数据库

    //打开数据库
    function init(tableName) {
    	openRequest = indexedDb.open(tableName);
    	//一个新的数据库被创建或被修改的时候触发
    	openRequest.onupgradeneeded = function(e) {
    		console.log("running onupgradeneeded");
    		var thisDb = e.target.result;
    		console.log(thisDb.version);
    		//如果不存在tableName这个表那么就新建一个
    		if (!thisDb.objectStoreNames.contains(tableName)) {
    			console.log("I need to create the objectstore");
    			var objectStore = thisDb.createObjectStore(
    				tableName, {
    					keyPath: "id", //主键
    					autoIncrement: true
    				}
    			);
    			//指定两个唯一可以索引的字段
    			objectStore.createIndex("name", "name", {
    				unique: false
    			});
    			objectStore.createIndex("phone", "phone", {
    				unique: false
    			});
    		}
    	};
    	//打开数据库成功触发
    	openRequest.onsuccess = function(event) {
    		db = event.target.result;
            //读取数据库
    		readAll();
    		console.log("打开数据库成功!")
    	}
    	//打开数据库失败时触发
    	openRequest.onerror = function(event) {
    		console.log("打开数据库失败");
    	}
    }
    

    7.使用游标遍历数据库

    //读取数据库
    function readAll() {
    	var transaction = db.transaction(tableName)
    
    	//事务成功监听函数
    	transaction.oncomplete = function(event) {
    		console.log("transaction complete");
    	}
    	transaction.onerror = function(event) {
    		console.dir(event);
    	}
    	var objectStore = transaction.objectStore(tableName);
    	//使用游标遍历
    	objectStore.openCursor().onsuccess = function(event) {
    		var cursor = event.target.result;
    		if (cursor) {
    			console.log(cursor.key);
    			console.dir(cursor.value);
    			create({
    				key: cursor.key,
    				name: cursor.value["name"],
    				phone: cursor.value["phone"],
    				address: cursor.value["address"]
    			});
    			lastCursor = cursor.key;
    			cursor.continue(); //下一条
    		} else {
    			console.log("没有更多数据了");
    		}
    	}
    	objectStore.openCursor().onerror = function(event) {
    		console.dir(event)
    	}
    
    }
    

    8.原生js动态添加元素

    //新建列表元素
    function create(person) {
    	var parent = document.getElementById("table"),
    		tr = document.createElement("tr"),
    		td1 = document.createElement("td"),
    		td2 = document.createElement("td"),
    		td3 = document.createElement("td"),
    		td4 = document.createElement("td");
    	tr.setAttribute("id", person.key);
    	tr.classList.add('content');
    	td1.innerHTML = person.name;
    	td2.innerHTML = person.phone;
    	td3.innerHTML = person.address;
    	td4.innerHTML = "<button class='del'>删除</button>";
    	tr.appendChild(td1);
    	tr.appendChild(td2);
    	tr.appendChild(td3);
    	tr.appendChild(td4);
    	parent.appendChild(tr);
    	var delEle = document.querySelectorAll('.del');
    	delEle[delEle.length - 1].addEventListener('click', del);
    }
    

    9.添加数据

    //添加数据
    function add() {
    	var form = document.index,
    		err;
    	var name = form.name.value,
    		phone = form.phone.value,
    		address = form.address.value,
    		person = {
    			name: name,
    			phone: phone,
    			address: address
    		};
    	try {
    		if (name == '') throw "姓名不能为空";
    		if (phone == '') throw "电话不能为空";
    		if (address == '') throw "地址不能为空";
    	} catch (err) {
    		console.log(err);
    		index--;
    		return;
    	}
    	var transaction = db.transaction([tableName], "readwrite");
    	transaction.oncomplete = function(event) {
    		console.log("transaction complete");
    	}
    	transaction.onerror = function(event) {
    		console.dir(event);
    	}
    	var objectStore = transaction.objectStore(tableName);
    	objectStore.add(person);
    	objectStore.openCursor().onsuccess = function(event) {
    		cursor = event.target.result;
    		var key;
    		if (lastCursor == null) {
    			key = cursor.key;
    			lastCursor = key;
    		} else {
    			key = ++lastCursor;
    		}
    		create({
    			key: key,
    			name: name,
    			phone: phone,
    			address: address
    		});
    		console.log("数据添加成功" + key);
    	}
    
    }
    

    10.删除数据

    //删除数据
    function del(event) {
    	var child = event.toElement.parentNode.parentNode,
    		id = child.getAttribute("id"),
    		parent = child.parentNode;
    	var transaction = db.transaction(tableName, 'readwrite')
    
    	//事务成功监听函数
    	transaction.oncomplete = function(event) {
    		console.log("transaction complete");
    	}
    	transaction.onerror = function(event) {
    		console.dir(event);
    	}
    	var objectStore = transaction.objectStore(tableName); //得到objectStore对象
    	var removeKey = parseInt(id);
    	var request = objectStore.delete(removeKey);
    	request.onsuccess = function(e) {
    		console.log("成功删除");
    		var child = event.toElement.parentNode.parentNode;
    		parent.removeChild(child);
    	};
    	request.onerror = function(e) {
    		console.log("删除失败")
    	}
    }
    

    11.查询数据

    //查询数据
    function seletDB() {
    	var curName = document.index.search.value;
    	var transaction = db.transaction(tableName, 'readonly')
    
    	//事务成功监听函数
    	transaction.oncomplete = function(event) {
    		console.log("transaction complete");
    	}
    	transaction.onerror = function(event) {
    		console.dir(event);
    	}
    	var objectStore = transaction.objectStore(tableName);
    	var boundKeyRange = IDBKeyRange.only(curName);
    	var index = 0;
    	objectStore.index("name").openCursor(boundKeyRange).onsuccess = function(event) {
    		var cursor = event.target.result;
    		if (!cursor) {
    			if (index == 0) {
    				console.log("查询无果")
    			}
    			return;
    		}
    		var trEle = document.querySelector('.content');
    		var parent = document.getElementById('table');
    		while (trEle && index == 0) {
    			parent.removeChild(trEle);
    			trEle = document.querySelector('.content');
    		}
    		index++;
    		var rowData = cursor.value;
    		create({
    			key: rowData.id,
    			name: rowData.name,
    			phone: rowData.phone,
    			address: rowData.address
    		})
    
    		cursor.continue();
    	}
    }
    

    12.删除数据库

    //删除数据库
    function deleteDB() {
    	var DBDeleteRequest = indexedDb.deleteDatabase('textTable');
    
    	DBDeleteRequest.onerror = function(event) {
    		console.log('Error');
    	};
    
    	DBDeleteRequest.onsuccess = function(event) {
    		console.log('success');
    	};
    	var trEle = document.querySelector('.content');
    	var parent = document.getElementById('table');
    	while (trEle) {
    		parent.removeChild(trEle);
    		trEle = document.querySelector('.content');
    	}
    
    }
    

     

    展开全文
  • indexedDB 操作库IDBWRAPPER 教程翻译及API翻译第一部分part1 indexedDB是html5出来后弄出来的客户端数据持久化方式的一种。...第一:浏览器兼容性问题,现在indexedDB只支持chrome与firefox 第二:操作Index...
  • [js] indexeddb 使用demo

    2019-09-26 15:55:28
    需要在服务器环境下运行才可正常存储...在IOS手机上兼容性很差。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> ...
  • 一、WebSQL WebSQL是前端的一个独立模块,是web... 兼容性:当前只有谷歌支持,ie和火狐均不支持。 我们对数据库的一般概念是后端才会跟数据库打交道,进行一些业务性的增删改查。而这里的数据库也...
  • 丛林数据库 ... 浏览器向后兼容性indexeddb-babel.js NodeJS LMDB: lmdb.js leveldb.js LevelDB: leveldb.js (不推荐) 在NodeJS中,您可以使用var JDB = require('@nimiq/jungle-db'); 包括LM
  • 视频存储旨在允许将大文件存储在indexedDB中,而不会在IOS设备上出现问题。 由于出现流媒体网站发生崩溃的情况,因此我正在开发此程序。 它同时适用于音频和视频文件 兼容性 浏览器 兼容性 笔记 Chrome(PC) :...
  • HTML5 兼容性头部类

    千次阅读 2014-01-11 14:29:59
    mod_br js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage border
  • 在安卓系统4.4以前,安卓手机自带webview的内核是Android webkit 浏览器内核,很多HTML5标准语法都不支持,比如indexeddb、webgl等,canvas性能也非常差。 从安卓系统4.4起,webview内核变成了chromium内核,内核...
  • 现在h5中提供了新的解决方式(API) 存储方式: 1.本地储存 localstorage &amp; sessionstorage;...3.浏览器数据库 indexedDB; 学习及使用判断: 这个是浏览器兼容查询网站:http://caniuse...
  • Lager.js是一个小型的javascript JavaScript库,用于在浏览器中使用indexedDB密钥存储库时使用的最常用功能。 相容通知 Lager.js与所有现代桌面浏览器(Chrome,Safari,FireFox)和IE 10+兼容。 大多数移动...
  • H5出来后浏览器多了几种存储方式, 如 localStorage、sessionstorage application cache Web SQL IndexedDB. ...一、获取indexDB对象,考虑到浏览器兼容性 window.indexedDB = window.indexedDB |...
  • //调整webkit兼容性 var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.w.....
  • 简单性:基于本地localStorage API,性能:通过异步indexedDB API内部存储,Angular-like:包装在RxJS Observables中,安全性:使用JSON Schema验证数据,兼容性:解决某些浏览器问题并经过严格测试GitHub动作,文档...
  • 请参阅[有关详细的兼容性信息的Wiki] [受支持的浏览器]。 安装 npm install --save localforage vlf 如何使用VLF import Vlf from 'vlf' import localforage from 'localforage' Vue . use ( Vlf , localforage ) ...
  • 这些方案就是如今应用最广、浏览器兼容性最高的三种前端储存方案 今天这篇文章就聊一聊这三种方案的历史,优缺点,以及各自在今天的适用场景 文章在后面还会提出一个全新的,基于 IndexedDB 的,更适合现代前端...
  • ember-cli-utilities-源码

    2021-04-17 11:14:26
    兼容性 Ember.js v2.18或更高版本 Ember CLI v2.13或更高版本 安装 ember install ember-cli-utilities 用法 插件 依存关系 "@glimmer/component": "1.0.0", "@glimmer/tracking": "1.0.0", "@orbit/data": ...
  • 目录 1 离线检测 2 应用缓存 3 数据存储 3.2 IE用户数据 3.3 Web存储机制 3.4 IndexedDB 1 离线检测 开发离线应用的第一步是要知道设备是在线还是离线...由于存在上述兼容性问题,单独使用 navigator.onLin...
  • Lawnchair是一个轻量级的...现在做HTML5移动应用除了LocalStorage的兼容性比较好之外,SQL web database以及IndexedDB都处在僵局中,虽然有人叫嚣着“我们应该干掉 LocalStorage API”,但那是后话,现在也没得...
  • Cookie技术:浏览器兼容性好,但操作比较复杂,需要程序员自己封装,源生的Cookie接口不友好 H5 WebStorage:不能超过8MB,操作简单; IndexedDB:可存大量数据,还不是标准技术; Flash存储:...

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

indexeddb兼容性