HTML5本地存储——IndexedDB入门

简介：
IndexedDB 是一种可以在浏览器内持久化存储数据的方法。这就意味着我们在离线时也可以正常使用浏览器。简单的说：IndexedDB是一个存储在本地的数据库。

IndexedDB基本使用模式：
1.打开数据库并且开始一个事务。
2.创建一个 object store。(相当于其他数据库中表的概念)
3.构建一个请求来执行一些数据库操作，像增加或提取数据等。
4.通过监听正确类型的 DOM 事件以等待操作完成。
5.在操作结果上进行一些操作（可以在 request 对象中找到）

一、判断浏览器是否支持

if (!window.indexedDB) {    alert("你的浏览器不支持indexedDB")；}

二、打开数据库

IndexedDB 对象只有一个单一方法open()，用于打开数据库，并指定版本号

var request = window.indexedDB.open("MyDatabase"，1);

这个请求有三个常用的处理函数：

// 请求错误时触发request.onerror = function(event) {};// 请求成功时触发request.onsuccess = function(event) {};//创建或更新数据库版本号request.onupgradeneeded = function(event) {    // 更新对象存储空间和索引 .... };

三、object store

indexedDB中没有表的概念，而是采用了objectStore代替表的作用。objectStore是对象存储空间，当存进一个值时，会有键与之对应。键的提供可以使用 key path 或者 key generator。

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

function openDB (name,version) {            var version=version || 1;            var request=window.indexedDB.open(name,version);            request.onerror=function(e){                console.log("Database error: " + event.target.errorCode);            };            request.onsuccess=function(e){                myDB.db=e.target.result;            };            request.onupgradeneeded=function(e){                console.log('Database version changed to '+version);            };        }        var myDB={            name:'test',            version:1,            db:null        };        openDB(myDB.name,myDB.version);

四、删除数据库

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

indexedDB.deleteDatabase(name);

五、事务(Transaction)

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

事务具有三种模式

模式 说明 “readonly” 只读 “readwrite” 可读可写 “versionchange” 版本变更

不设置事务级别，默认为readonly,通过事务对象的objectStore()方法才可以取得对象存储

方法 说明 objectStore(name) 从当前事务中取得对象存储 abort() 中断当前事务

六、keyPath与keyGenerate

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控制台看看效果

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);            };        }

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

查找数据

可以调用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'); }

当然，这只是入门，大家如果感兴趣，可以继续深入学习ndexedDB的索引。