精华内容
下载资源
问答
  • indexDB

    2020-06-02 13:18:19
    具体实现步骤键收藏中indexDB文章 对于indexDB要补充的是 request=indexBD.oprn("admin") 这里indexDB.open()会返回一个IDBRequest对象,在事件处理程序中,event.target指向request,因此两者可以互换使用 //1....

    具体实现步骤键收藏中indexDB文章
    对于indexDB要补充的是

    request=indexBD.oprn("admin")
    

    这里indexDB.open()会返回一个IDBRequest对象,在事件处理程序中,event.target指向request,因此两者可以互换使用

    //1.创建indexDB数据库    
    const request=indexedDB.open("myDatabase",2);    
    request.addEventListener("success",e=>{        
    console.log("连接数据库成功")    })    
    request.addEventListener("error",r=>{        
    console.log("连接数据库失败")    
    })    
    //2.创建对象仓库    
    request.addEventListener("upgradeneeded",e=>{        
    const db=e.target.result;        
    const store=db.createObjectStore("Users",{            keyPath:"userId",            
    autoIncrement:false        
    })        
    console.log("创建对象仓库成功")    
    })    
    //3.创建事务    
    request.addEventListener("success",e=>{        
    const db=e.target.result;        
    const tx=db.transaction("Users","readwrite")    
    })    
    // 4.添加数据    
    request.addEventListener("success",e=>{        
    const db=e.target.result;        
    const tx=db.transaction("Users","readwrite")        
    const store=tx.objectStore("Users");        
    const reqAdd=store.add(            
    {            
    "userId":6,            
    "userName":"佘未希",            
    "age":21            
    }    
    )        
    reqAdd.addEventListener("success",e=>{            
    console.log("保存成功")        
    })    
    })    
    //5、获取数据    
    request.addEventListener("success",e=>{        
    const db=e.target.result;        
    const tx=db.transaction("Users","readwrite")        
    const store=tx.objectStore("Users");        
    const reqGet=store.get(12);        
    reqGet.addEventListener("success",e=>{            
    console.log(e.srcElement.result);        
    })    
    })    
    //6、删除数据    
    request.addEventListener("success",e=>{        
    const db=e.target.result;        
    const tx=db.transaction("Users","readwrite")        
    const store=tx.objectStore("Users");       
    const reqDelete=store.delete(1);        
    reqDelete.addEventListener("success",e=>{            
    console.log("删除数据成功")        
    }})    
    // 7、使用游标    
    request.addEventListener("success",e=>{        
    const db=e.target.result;        
    const tx=db.transaction("Users","readwrite")        
    const store=tx.objectStore("Users");        
    const range=IDBKeyRange.bound(1,10);        
    const req=store.openCursor(range,"prev");        
    req.addEventListener("success",e=>{            
    const cursor=e.target.result;            
    if(cursor){                
    console.log(cursor.value.userName);                
    cursor.continue()            
    }else{                
    console.log("检索结束")            
    }        
    })    }
    )    
    // 8、创建索引    
    request.addEventListener("upgradeneeded",e=>{        
    const db=e.target.result;        
    const store=db.createObjectStore("Users",{            
    keyPath:"userId",            
    autoIncrement:false        
    })        
    const idx=store.createIndex("ageIndex","age",{            
    unique:false       
     })    
     })    
     // 9.使用索引    
     request.addEventListener("success",e=>{        
     const db=e.target.result;        
     const tx=db.transaction("Users")        
     const store=tx.objectStore("Users");        
     const index = store.index('ageIndex');        
     const req=index.openCursor(IDBKeyRange.lowerBound(20),"next");        
     req.addEventListener("success",e=>{            
     if(cursor){                
     console.log(cursor.value.age);                
     cursor.contine()            
     }else{                
     console.log("检索结束")            
     }        
     })    
     })

    索引尚未实现

    展开全文
  • indexdb

    2019-08-27 11:11:59
    indexdb增删改查indexdbindexdb增删改查案例 indexdb 写这篇文章主要是,因为项目中用到了这个东西,这篇文章的主要内容,我主要是记录一下,当时我完成app登录拦截功能时的思路。做功能之前我主要去网上参考了几篇...

    indexdb

    写这篇文章主要是,因为项目中用到了这个东西,这篇文章的主要内容,我主要是记录一下,当时我完成app登录拦截功能时的思路。做功能之前我主要去网上参考了几篇文章,首先我去看了一下概念,了解概念以后,就分别去了解了一下indexdb是如何建库建表新增查找数据的。链接我提供一下,阮一峰网络日志

    indexdb增删改查案例

    这里提供一篇参考博客indexdb增删改查实例
    因为我要实现登录功能,大概思路是创建数据库,然后创建数据表,将用户名存进去,下次登录直接在本地判断用户名是否存在即可,退出登录以后,先关闭数据库,在删除数据库。下面是我的测试代码,亲测可用:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>indexdb</title>
    </head>
    <body>
    <input type="button" onclick="addData(myDB.db,'students')" value="新增数据">
    <input type="button" onclick="closeDB(myDB.db)" value="关闭数据库">
    <input type="button" onclick="deleteDB(myDB.name)" value="删除数据库">
    <script type="text/javascript">
        var myDB = {
            name: 'test',
            version: 1,
            db: null
        };
    
        var students = [{
            id: 1001,
            name: "Byron",
            age: 24
        }, {
            id: 1002,
            name: "Frank",
            age: 30
        }, {
            id: 1003,
            name: "Aaron",
            age: 26
        }, {
            id: 1004,
            name: "Casper",
            age: 26
        }];
    
        function openDB(name, version) {
            var version = version || 1;
            var request = window.indexedDB.open(name, version);
            request.onerror = function (e) {
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess = function (e) {
                myDB.db = e.target.result;
            };
            request.onupgradeneeded = function (e) {
                var db = e.target.result;
                if (!db.objectStoreNames.contains('students')) {
                    var store = db.createObjectStore('students', { keyPath: 'id' });
                    store.createIndex('nameIndex', 'name', { unique: true });
                    store.createIndex('ageIndex', 'age', { unique: false });
                }
                console.log('DB version changed to ' + version);
            };
        }
        function closeDB(db) {
            db.close();
        }
    
        function deleteDB(name) {
            indexedDB.deleteDatabase(name);
        }
    
        function addData(db, storeName) {
            var trans = db.transaction([storeName], 'readwrite');
            var store = trans.objectStore(storeName);
    
            for (var i = 0; i < students.length; i++) {
                store.add(students[i]);
            }
        }
    
        function getDataByKey(db, storeName, value) {
            var transaction = db.transaction(storeName, 'readwrite');
            var store = transaction.objectStore(storeName);
            var request = store.get(value);
            request.onsuccess = function (e) {
                var student = e.target.result;
                console.log(student.name);
            };
        }
    
        function updateDataByKey(db, storeName, value) {
            var transaction = db.transaction(storeName, 'readwrite');
            var store = transaction.objectStore(storeName);
            var request = store.get(value);
            request.onsuccess = function (e) {
                var student = e.target.result;
                student.age = 35;
                store.put(student);
            };
        }
    
        function deleteDataByKey(db, storeName, value) {
            var transaction = db.transaction(storeName, 'readwrite');
            var store = transaction.objectStore(storeName);
            store.delete(value);
        }
    
        function clearObjectStore(db, storeName) {
            var transaction = db.transaction(storeName, 'readwrite');
            var store = transaction.objectStore(storeName);
            store.clear();
        }
    
        function deleteObjectStore(db, storeName) {
            var transaction = db.transaction(storeName, 'versionchange');
            db.deleteObjectStore(storeName);
        }
    
        function fetchStoreByCursor(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var request = store.openCursor();
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    console.log(cursor.key);
                    var currentStudent = cursor.value;
                    console.log(currentStudent.name);
                    cursor.continue();
                }
            };
        }
    
        function getDataByIndex(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("ageIndex");
            index.get(26).onsuccess = function (e) {
                var student = e.target.result;
                console.log(student.id);
            }
        }
    
        function getMultipleData(db, storeName) {
            var transaction = db.transaction(storeName);
            var store = transaction.objectStore(storeName);
            var index = store.index("nameIndex");
            var request = index.openCursor(null, IDBCursor.prev);
            request.onsuccess = function (e) {
                var cursor = e.target.result;
                if (cursor) {
                    var student = cursor.value;
                    console.log(student.name);
                    cursor.continue();
                }
            }
        }
    
        openDB(myDB.name,myDB.version);
    </script>
    </body>
    </html>
    

    上面是一个封装好的indexdb代码,里面的方法我就暂时研究了indexdb初始化数据库,indexdb新建表并且添加数据,indexdb关闭数据库并且删除数据库,其他的暂时还没有用到了,简单看了一下,就没有测试了,感兴趣的朋友就自己测试吧,这里简单做一个记录,方便以后自己查看和回忆。

    展开全文
  • indexDB

    2017-10-21 10:53:02
    from here ,original :indexdb HTML5本地存储——IndexedDB(一:基本使用) 在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被...

    from here ,original :indexdb




    HTML5本地存储——IndexedDB(一:基本使用)

    HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了

    Web Storage(Local Storage和Session Storage)与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。

    异步API

    在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式,比如打开数据库的操作

    var request=window.indexedDB.open('testDB');

    这条指令并不会返回一个DB对象的句柄,我们得到的是一个IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中,

    image

    这条指令请求的响应是一个 IDBDatabase对象,这就是IndexedDB对象,

    image

     

    除了result,IDBOpenDBRequest接口定义了几个重要属性

    • onerror: 请求失败的回调函数句柄
    • onsuccess:请求成功的回调函数句柄
    • onupgradeneeded:请求数据库版本变化句柄

     

    所谓异步API是指并不是这条指令执行完毕,我们就可以使用request.result来获取indexedDB对象了,就像使用ajax一样,语句执行完并不代表已经获取到了对象,所以我们一般在其回调函数中处理。

    创建数据库

    刚才的语句已经展示了如何打开一个indexedDB数据库,调用indexedDB.open方法就可以创建或者打开一个indexedDB。看一个完整的处理

    复制代码
    function openDB (name) {
                var request=window.indexedDB.open(name);
                request.onerror=function(e){
                    console.log('OPen Error!');
                };
                request.onsuccess=function(e){
                    myDB.db=e.target.result;
                };
            }
    
            var myDB={
                name:'test',
                version:1,
                db:null
            };
            openDB(myDB.name);
    复制代码

    代码中定义了一个myDB对象,在创建indexedDB request的成功毁掉函数中,把request获取的DB对象赋值给了myDB的db属性,这样就可以使用myDB.db来访问创建的indexedDB了。

    version

    我们注意到除了onerror和onsuccess,IDBOpenDBRequest还有一个类似回调函数句柄——onupgradeneeded。这个句柄在我们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用。

    indexedDB.open()方法还有第二个可选参数,数据库版本号,数据库创建的时候默认版本号为1,当我们传入的版本号和数据库当前版本号不一致的时候onupgradeneeded就会被调用,当然我们不能试图打开比当前数据库版本低的version,否则调用的就是onerror了,修改一下刚才例子

    复制代码
    function openDB (name,version) {
                var version=version || 1;
                var request=window.indexedDB.open(name,version);
                request.onerror=function(e){
                    console.log(e.currentTarget.error.message);
                };
                request.onsuccess=function(e){
                    myDB.db=e.target.result;
                };
                request.onupgradeneeded=function(e){
                    console.log('DB version changed to '+version);
                };
            }
    
            var myDB={
                name:'test',
                version:3,
                db:null
            };
            openDB(myDB.name,myDB.version);
    复制代码

    由于刚才已经创建了版本为1的数据库,打开版本为3的时候,会在控制台输出:DB version changed to 3

    关闭与删除数据库

    关闭数据库可以直接调用数据库对象的close方法

    function closeDB(db){
                db.close();
            }

    删除数据库使用indexedDB对象的deleteDatabase方法

    function deleteDB(name){
                indexedDB.deleteDatabase(name);
            }

    简单调用

    复制代码
    var myDB={
                name:'test',
                version:3,
                db:null
            };
            openDB(myDB.name,myDB.version);
            setTimeout(function(){
                closeDB(myDB.db);
                deleteDB(myDB.name);
            },500);
    复制代码

    由于异步API愿意,不能保证能够在closeDB方法调用前获取db对象(实际上获取db对象也比执行一条语句慢得多),所以用了setTimeout延迟了一下。当然我们注意到每个indexedDB实例都有onclose回调函数句柄,用以数据库关闭的时候处理,有兴趣同学可以试试,原理很简单,不演示了。

     

    object store

    有了数据库后我们自然希望创建一个表用来存储数据,但indexedDB中没有表的概念,而是objectStore,一个数据库中可以包含多个objectStore,objectStore是一个灵活的数据结构,可以存放多种类型数据。也就是说一个objectStore相当于一张表,里面存储的每条数据和一个键相关联。

    我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore可以存储的数据结构也有差异

    键类型 存储数据
    不使用 任意值,但是没添加一条数据的时候需要指定键参数
    keyPath Javascript对象,对象必须有一属性作为键值
    keyGenerator 任意值
    都使用 Javascript对象,如果对象中有keyPath指定的属性则不生成新的键值,如果没有自动生成递增键值,填充keyPath指定属性

     

    事务

    在对新数据库做任何事情之前,需要开始一个事务。事务中需要指定该事务跨越哪些object store。

    事务具有三种模式

    1. 只读:read,不能修改数据库数据,可以并发执行
    2. 读写:readwrite,可以进行读写操作
    3. 版本变更:verionchange

     

    var transaction=db.transaction([students','taecher']);  //打开一个事务,使用students 和teacher object store
    var objectStore=transaction.objectStore('students'); //获取students object store

    给object store添加数据

     

    调用数据库实例的createObjectStore方法可以创建object store,方法有两个参数:store name和键类型。调用store的add方法添加数据。有了上面知识,我们可以向object store内添加数据了

     

    keyPath

    因为对新数据的操作都需要在transaction中进行,而transaction又要求指定object store,所以我们只能在创建数据库的时候初始化object store以供后面使用,这正是onupgradeneeded的一个重要作用,修改一下之前代码

    复制代码
    function openDB (name,version) {
                var version=version || 1;
                var request=window.indexedDB.open(name,version);
                request.onerror=function(e){
                    console.log(e.currentTarget.error.message);
                };
                request.onsuccess=function(e){
                    myDB.db=e.target.result;
                };
                request.onupgradeneeded=function(e){
                    var db=e.target.result;
                    if(!db.objectStoreNames.contains('students')){
                        db.createObjectStore('students',{keyPath:"id"});
                    }
                    console.log('DB version changed to '+version);
                };
            }
    复制代码

     

    这样在创建数据库的时候我们就为其添加了一个名为students的object store,准备一些数据以供添加

    复制代码
    var students=[{ 
                id:1001, 
                name:"Byron", 
                age:24 
            },{ 
                id:1002, 
                name:"Frank", 
                age:30 
            },{ 
                id:1003, 
                name:"Aaron", 
                age:26 
            }];
    复制代码
    复制代码
    function addData(db,storeName){
                var transaction=db.transaction(storeName,'readwrite'); 
                var store=transaction.objectStore(storeName); 
    
                for(var i=0;i<students.length;i++){
                    store.add(students[i]);
                }
            }
    
    
    openDB(myDB.name,myDB.version);
            setTimeout(function(){
                addData(myDB.db,'students');
            },1000);
    复制代码

    这样我们就在students object store里添加了三条记录,以id为键,在chrome控制台看看效果

    image

     

    keyGenerate

     

    复制代码
    function openDB (name,version) {
                var version=version || 1;
                var request=window.indexedDB.open(name,version);
                request.onerror=function(e){
                    console.log(e.currentTarget.error.message);
                };
                request.onsuccess=function(e){
                    myDB.db=e.target.result;
                };
                request.onupgradeneeded=function(e){
                    var db=e.target.result;
                    if(!db.objectStoreNames.contains('students')){
                        db.createObjectStore('students',{autoIncrement: true});
                    }
                    console.log('DB version changed to '+version);
                };
            }
    复制代码

    image

    剩下的两种方式有兴趣同学可以自己摸索一下了

    查找数据

    可以调用object store的get方法通过键获取数据,以使用keyPath做键为例

    复制代码
    function getDataByKey(db,storeName,value){
                var transaction=db.transaction(storeName,'readwrite'); 
                var store=transaction.objectStore(storeName); 
                var request=store.get(value); 
                request.onsuccess=function(e){ 
                    var student=e.target.result; 
                    console.log(student.name); 
                };
    }
    复制代码

    更新数据

    可以调用object store的put方法更新数据,会自动替换键值相同的记录,达到更新目的,没有相同的则添加,以使用keyPath做键为例

    复制代码
    function updateDataByKey(db,storeName,value){
                var transaction=db.transaction(storeName,'readwrite'); 
                var store=transaction.objectStore(storeName); 
                var request=store.get(value); 
                request.onsuccess=function(e){ 
                    var student=e.target.result; 
                    student.age=35;
                    store.put(student); 
                };
    }
    复制代码

    删除数据及object store

     

    调用object store的delete方法根据键值删除记录

    function deleteDataByKey(db,storeName,value){
                var transaction=db.transaction(storeName,'readwrite'); 
                var store=transaction.objectStore(storeName); 
                store.delete(value); 
            }

    调用object store的clear方法可以清空object store

    function clearObjectStore(db,storeName){
                var transaction=db.transaction(storeName,'readwrite'); 
                var store=transaction.objectStore(storeName); 
                store.clear();
    }

    调用数据库实例的deleteObjectStore方法可以删除一个object store,这个就得在onupgradeneeded里面调用了

    if(db.objectStoreNames.contains('students')){ 
                        db.deleteObjectStore('students'); 
    }

    最后

     

    这就是关于indexedDB的基本使用方式,很多同学看了会觉得很鸡肋,和我们正常自己定义个对象使用没什么区别,也就是能保存在本地罢了,这是因为我们还没有介绍indexedDB之所以称为indexed的杀器——索引,这个才是让indexedDB大显神通的东西,下篇我们就来看看这个杀器。


    展开全文
  • IndexDB

    2019-09-28 08:20:38
    参考:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html cookie localStorage IndexedDB 大小 不超过4KB 2.5MB-10MB 存储大量数据(不少于250MB) ...提供查找接口,...

    参考:http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

      cookie localStorage IndexedDB
    大小 不超过4KB 2.5MB-10MB 存储大量数据(不少于250MB)
    区别 每次请求都会发送回服务器 不提供搜索功能,不能建立自定义的索引 提供查找接口,还能建立索引
        同步 异步

    特点:

    1)IndexedDB 不属于关系型数据库(不支持 SQL 查询语句)

    2)键值对储存 所有类型的数据都可以直接存入,包括 JavaScript 对象。

    3)异步 防止大量数据的读写,拖慢网页的表现。

    4)支持事务(transaction) 这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

    5)同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。

    6)支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)

     

    一、API(indexDB各种对象接口)

    数据库:IDBDatabase 对象
    对象仓库:IDBObjectStore 对象
    索引: IDBIndex 对象
    事务: IDBTransaction 对象
    操作请求:IDBRequest 对象
    指针: IDBCursor 对象
    主键集合:IDBKeyRange 对象

    1)对象仓库

    每个数据库包含若干个对象仓库(object store)类似于关系型数据库中的table.

    2)数据记录

    数据仓库中保存的是数据记录,类似于关系型数据库中的,但只有主键和数据体两部分。(主键用来建立默认索引,必须不同;主键可以是数据纪录中的一个属性,也可以是一个递增的整数编号)

    3)索引

    为了加速数据的检索,可以在对象仓库中,为不同的属性建立索引。

    4)事务

    数据记录的读写和删改,都要通过事务完成。事务对象提供errorabortcomplete三个事件,用来监听操作结果。

     

    二、操作

    1. 打开数据库

      var request = window.indexedDB.open(databaseName, version);

    这个方法接受两个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在,就会新建数据库。

    第二个参数是整数,表示数据库的版本。如果省略,打开已有数据库时,默认为当前版本;新建数据库时,默认为1

    indexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件errorsuccessupgradeneeded,处理打开数据库的操作结果。

    onsuccess

    var db;
    request.onsuccess = function (event) {
          db = request.result;
          console.log('数据库打开成功');
    };
    

    onupgradeneeded:如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件

    var db;
    
    request.onupgradeneeded = function (event) {
      db = event.target.result;
    }

    2. 新建数据库

    新建数据库与打开数据库是同一个操作。如果指定的数据库不存在,就会新建。不同之处在于,后续的操作主要在upgradeneeded事件的监听函数里面完成,因为这时版本从无到有,所以会触发这个事件。

    request.onupgradeneeded = function (event) {
      db = event.target.result;
      var objectStore;
      if (!db.objectStoreNames.contains('person')) {
        objectStore = db.createObjectStore('person', { keyPath: 'id' });
      }
    }
    // 新增一张叫做person的表格,主键是id
    • 主键(key)是默认建立索引的属性。
    • 主键也可以指定为下一层对象的属性,比如{ foo: { bar: 'baz' } }foo.bar也可以指定为主键。
    • 如果数据记录里面没有合适作为主键的属性,那么可以让 IndexedDB 自动生成主键。
    var objectStore = db.createObjectStore(
        'person',
        { autoIncrement: true }
    );

    3. 新建索引

    request.onupgradeneeded = function(event) {
      db = event.target.result;
      var objectStore = db.createObjectStore('person', { keyPath: 'id' });
      objectStore.createIndex('name', 'name', { unique: false });
      objectStore.createIndex('email', 'email', { unique: true });  // 索引名称、索引所在的属性、配置对象
    }
        var transaction = db.transaction(['person'], 'readonly');
        var store = transaction.objectStore('person');
        var index = store.index('name');
        var request = index.get('李四');
    
        request.onsuccess = function (e) {
          var result = e.target.result;
          if (result) {
            // ...
          } else {
            // ...
          }
        }

     

    4.1  新建数据

    新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

        function add() {
          var request = db.transaction(['person'], 'readwrite')   //指定表格名称,操作模式
            .objectStore('person')
            .add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });
    
          request.onsuccess = function (event) {
            console.log('数据写入成功');
          };
    
          request.onerror = function (event) {
            console.log('数据写入失败');
          }
        }
    
        add();

    新建事务以后,通过IDBTransaction.objectStore(name)方法拿到 IDBObjectStore 对象,再通过表格对象的add()方法,向表格写入一条记录。

    4.2 读取数据  objectStore.get()方法用于读取数据,参数是主键的值。

        function read() {
           var transaction = db.transaction(['person']);
           var objectStore = transaction.objectStore('person');
           var request = objectStore.get(1);
    
           request.onerror = function(event) {
             console.log('事务失败');
           };
    
           request.onsuccess = function( event) {
              if (request.result) {
                console.log('Name: ' + request.result.name);
                console.log('Age: ' + request.result.age);
                console.log('Email: ' + request.result.email);
              } else {
                console.log('未获得数据记录');
              }
           };
        }
    
        read();

    4.3 遍历数据

        function readAll() {
          var objectStore = db.transaction('person').objectStore('person');
    
           objectStore.openCursor().onsuccess = function (event) {
             var cursor = event.target.result;
    
             if (cursor) {
               console.log('Id: ' + cursor.key);
               console.log('Name: ' + cursor.value.name);
               console.log('Age: ' + cursor.value.age);
               console.log('Email: ' + cursor.value.email);
               cursor.continue();
            } else {
              console.log('没有更多数据了!');
            }
          };
        }
    
        readAll();

    4.4. 更新数据

    function updata () {
        var request = db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .put({id:1, name:'lixing', age:25 email: 'lixing@sina.com'});
        
      request.onsuccess = function (event) {
        console.log('数据更新成功');
      };
    
      request.onerror = function (event) {
        console.log('数据更新失败');
      }
    }
    
    update();

    4.5 删除数据

    function remove() {
      var request = db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .delete(1);
    
      request.onsuccess = function (event) {
        console.log('数据删除成功');
      };
    }
    
    remove()

     

    转载于:https://www.cnblogs.com/ceceliahappycoding/p/11577087.html

    展开全文
  • <div><p>localForage 1.5.0 supports now indexDB for Safari browser: "We now use IndexedDB as the storage engine for Safari v10.1 (and above)." <p>localforage-cordovasqlitedriver updated also to...
  • indexdb is slow

    2020-12-28 02:45:41
    When using indexdb on a record set of 40k records, a query is taking 20 second to return when websql is around 1/2 second <p><strong>Expected behavior Query to be quick as web sql, tested in safari....
  • indexDB数据库

    2017-05-03 17:54:00
    indexDB数据库 参考网址:https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API 该数据库是一种存储在客户端本笃的NoSQL数据库,他是事务性数据库系统 IndexedDB里数据以对象的形式存储,每个对象都...
  • indexDB的概念

    千次阅读 2015-10-07 09:49:59
    IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本。 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据键值的方式来保存数据,只要创建索引,就...
  • indexDB 前端操作

    千次阅读 2018-10-11 18:57:17
    indexDB 是一种低级api ,用于客户端存储大量结构化数据。该api使用索引来实现对该数据的高性能搜索。 为应用提供离线版本 indexdb 特点 键值存储。 IndexedDB 内部采用对象仓库(object store)存放数据。所有...
  • 离线应用随着5G的到来,访问网络越来越方便,但是不可否认的是,我们总会遇到断网的时候,在这个时代,断网有时候比停水,...indexdb之前我们对于web端的数据保存要么使用cookie,要么使用localstorage。无论使用哪...
  • 1. Clear browser history and clear indexDB 2. Load the app. Notice indexdb is empty 3. Reload app. Indexdb is now populated.</p><p>该提问来源于开源项目:Esri/offline-editor-js</p></div>
  • 简单实用浏览器indexDB

    2019-06-09 11:52:32
    之前在做项目的过程中,偶有用到indexDB来做缓存,后面就基本上使用的localstrage,恩,其实indexDB也是挺好使用的,可以去看看张鑫旭的这几篇文章 ...
  • Algorithm-study-indexdb.zip

    2019-09-17 18:04:45
    Algorithm-study-indexdb.zip,基于磁盘的索引数据库实现。纯粹是用Java编写的。,算法是为计算机程序高效、彻底地完成任务而创建的一组详细的准则。
  • 超方便的 IndexDB

    千次阅读 2019-06-20 21:41:11
    做为 Web 浏览器层的本地存储,IndexDB 做为一个很好的选择,几乎可以存储任意类型的数据,且是异步的。但是正常使用方式下需要在监听各种事件来处理结果,不是很方便,下面就对这一层进行了包装,使用方便。 ...
  • <div><p>The add-on has been showing me IndexDB errors for a long time. However, there are thousands of DBs from all the site that I've visited before. I also tried the method in the wiki several ...
  • <div><p>indexDB does not seem to be uniformly available in module contexts. Namely, it does not exist in a safe way to use for either firefox extensions or in node sandboxes. <p>As such, if we need ...
  • 前端 IndexDB 操作入门教程 idb-js 基于indexdb本地数据库的封装 文档地址 安装: npm install idb-js --save 使用: 第一步: 引入Idb import Idb from 'idb-js' // 引入Idb 第二步: 引入数据库配置...
  • 浏览器数据库 IndexDB 封装示例 感谢阮一峰大佬的技术分享 JS 封装示例 // indexDB.js // 打开或创建数据库(如果已经存在就打开,否则就创建) var dbName = 'project'; // success, error 可以不传 function ...
  • <div><p>Is there a way I can observe to IndexDB actions like 'add', 'update', or 'delete'</p><p>该提问来源于开源项目:genkgo/ember-localforage-adapter</p></div>
  • HTML5 IndexDB高级使用

    2020-12-05 23:01:37
    IndexDB的优点: 1、允许快速索引和搜索的对象,所以在HTML5 的 web应用程序中, 你可以有效管理你的数据和高效率的读/写操作。 2、W3C主推的离线数据库类型,逐渐替代Web SQL类型数据库,更新效率高并不断完善。 3...
  • 主要介绍了使用HTML5 IndexDB存储图像和文件的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • html5 indexDB

    2016-03-01 10:37:22
    <!DOCTYPE html> <title>indexDB <script type="text/javascript" src="http://www.jeasyuicn.com/cron/jquery.min.js"></script> <script
  • 关于浏览器开启indexDB的那些事儿

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 923
精华内容 369
关键字:

indexdb