IndexedDB存储数据

IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了LocalStorage和Cookies,为什么还要推出indexedDB呢?其实对于在浏览器里存储数据,可以使用cookies或LocalStorage,但它们都是比较简单的技术,而IndexedDB提供了类似数据库风格的数据存储和使用方式。

LocalStorage 与 IndexedDB 区别也适用场景

LocalStorage是用key-value键值模式存储数据,它存储的数据都是字符串形式。如果你想让LocalStorage存储对象,你需要借助JSON.stringify()能将对象变成字符串形式,再用JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的,所以它的 api 设计为同步的。

IndexedDB很适合存储大量数据,它的 API 是异步调用的。IndexedDB使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。IndexedDB比localstorage强大得多,但它的 API 也相对复杂。对于简单的数据,你应该继续使用localstorage,但当你希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB能提供你更为复杂的查询数据的方式。

indexedDB 的特性

对象仓库

有了数据库后我们自然希望创建一个表用来存储数据,但 indexedDB 中没有表的概念,而是 objectStore,一个数据库中可以包含多个 objectStore,objectStore 是一个灵活的数据结构,可以存放多种类型数据。也就是说一个 objectStore 相当于一张表,里面存储的每条数据和一个键相关联。我们可以使用每条记录中的某个指定字段作为键值(keyPath),也可以使用自动生成的递增数字作为键值(keyGenerator),也可以不指定。选择键的类型不同,objectStore 可以存储的数据结构也有差异。

事务性

在 indexedDB 中,每一个对数据库操作是在一个事务的上下文中执行的。事务范围一次影响一个或多个 object stores,你通过传入一个 object store 名字的数组到创建事务范围的函数来定义。例如:db.transaction(storeName, 'readwrite'),创建事务的第二个参数是事务模式。当请求一个事务时,必须决定是按照只读还是读写模式请求访问。

基于请求

对 indexedDB 数据库的每次操作,描述为通过一个请求打开数据库,访问一个 object store,再继续。IndexedDB API 天生是基于请求的,这也是 API 异步本性指示。对于你在数据库执行的每次操作,你必须首先为这个操作创建一个请求。当请求完成,你可以响应由请求结果产生的事件和错误。

异步

在 IndexedDB 大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求—响应的模式,所谓异步 API 是指并不是这条指令执行完毕,我们就可以使用 request.result 来获取 indexedDB 对象了,就像使用 ajax 一样,语句执行完并不代表已经获取到了对象,所以我们一般在其回调函数中处理。

几个概念

●IDBFactory:数据库工厂,负责打开或者创建数据库

    ●IDBFactory.open 方法发送一个打开或者创建一个数据库的请求

    ●IDBFactory.deleteDatabase 方法: 发送一个删除数据库的请求

●IDBDatabase: 数据库

    ●IDBDatabase.close 方法关闭数据库。

    ●IDBDatabase.createObjectStore 方法创建 store,相当于表

    ● IDBDatabase.transaction 开启一个事务。

● IDBIndex:数据库表的索引

● IDBObjectStore:数据库表

● IDBTransaction:事务

● IDBRequest:机会是所有 indexedDB 操作的返回值,indexedDB 操作请求

    ● IDBRequest.result 结果

    ● IDBRequest.onerror 异常事件

    ● IDBRequest.onsuccess 成功的事件


function IndexedDBDataBase(){

    var myDB={

            name:'TestDatabase',

            version:1,

            db:null,

            ojstore:{

                name:'user',//存储空间表的名字

                keypath:'id'//主键

            }

    };

    var userObject=null;

// 创建indexedDB对象,兼容各种浏览器

    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;

    var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;//键范围

    if (!indexedDB) {

      console.log("你的浏览器不支持IndexedDB");

    }

    this.getDataBaseObject= function(){

            //获取数据库信息


              return myDB;

        }

    this.getUserObject= function(){

            //获取数据库信息


              return userObject;

        }

    /*  建立或打开数据库,建立对象存储空间(ObjectStore)

    * @param {string}echo3991Type 版本类型

    * @param {obj}

    * @param {bool}

    * @param {bool}

    */

    this.openDB = function (myDB,dbname,dbversion,callback){



            var self = this;

            var version = dbversion || 1;

            var request = indexedDB.open(dbname,version);

            request.onerror = function(e){

                console.log(e.currentTarget.error.message);

            };

            request.onsuccess = function(e){

                myDB.db = e.target.result;


                console.log('成功建立并打开数据库:'+myDB.name+' version'+dbversion);


            };

            request.onupgradeneeded=function(e){

                var db=e.target.result,transaction= e.target.transaction,store;

                if(!db.objectStoreNames.contains(myDB.ojstore.name)){

                    //没有该对象空间时创建该对象空间

                    store = db.createObjectStore(myDB.ojstore.name,{keyPath:myDB.ojstore.keypath});

                    console.log('成功建立对象存储空间:'+myDB.ojstore.name);

                }

            }


        },

/*  删除数据库

    * @param {string}echo3991Type 版本类型

    * @param {obj}

    * @param {bool}

    * @param {bool}

    */

    this.deletedb = function(dbname){

            //删除数据库

            var self = this;

            self.indexedDB.deleteDatabase(dbname);

            console.log(dbname+'数据库已删除')

        },

        this.closeDB= function(db){

            //关闭数据库

            db.close();

            console.log('数据库已关闭')

        }

      this.addData= function(db,storename,data){

            //添加数据,重复添加会报错


            var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;

            for(var i = 0 ; i < data.length;i++){

                request = store.add(data[i]);

                request.onerror = function(){

                    console.error('add添加数据库中已有该数据')

                };

                request.onsuccess = function(){

                    console.log('add添加数据已存入数据库')

                };

            }


        }

        this.putData= function(db,storename,data){

            //添加数据,重复添加会更新原有数据

            var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;

            for(var i = 0 ; i < data.length;i++){

                request = store.put(data[i]);

                request.onerror = function(){

                    console.error('put添加数据库中已有该数据')

                };

                request.onsuccess = function(){

                    console.log('put添加数据已存入数据库')

                };

            }

        }

        this.getDataByKey= function(db,storename,key){

            //根据存储空间的键找到对应数据


            var store = db.transaction(storename,'readwrite').objectStore(storename);

            var request = store.get(key);

            request.onerror = function(){

                console.error('getDataByKey error');

            };

            request.onsuccess = function(e){

                var result = e.target.result;

                userObject= result;


                console.log('查找数据成功')

                console.log(result);


            };


        }

        this.deleteData= function(db,storename,key){

            //删除某一条记录

            var store = store = db.transaction(storename,'readwrite').objectStore(storename);

            store.delete(key)

            console.log('已删除存储空间'+storename+'中'+key+'记录');

        }

        this.clearData= function(db,storename){

            //删除存储空间全部记录

            var store = db.transaction(storename,'readwrite').objectStore(storename);

            store.clear();

            console.log('已删除存储空间'+storename+'全部记录');

        }

    }

调用方法:


var user=[{

                        id:1,

                        name:user_name,

                        is_admin:data.is_admin,

                        password:password

                    }];

                    console.log(user)

                    var myDB=IndexedDBD.getDataBaseObject();

                    IndexedDBD.openDB(myDB,myDB.name,myDB.version);


                    setTimeout(function(){

                        var myDB=IndexedDBD.getDataBaseObject();

                        setTimeout(function(){

                          IndexedDBD.addData(myDB.db,myDB.ojstore.name,user);

                        },200);

                    },500);

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341