IndexedDB:浏览器里放置的数据库(转)

IndexedDB是HTML5业内里新面世的浏览器里停放的数据库。对于在浏览器里储存数据,你可以使用cookies或local
storage,但它们都是相比较不难的技能,而IndexedDB提供了接近数据库风格的数额存储和利用方法。存储在IndexedDB里的多少是恒久保存,不像cookies这样只是临时的。IndexedDB里提供了询问数据的作用,在online和offline形式下都能使用。你可以用IndexedDB存储大型数据。

IndexedDB里多少以目标的款式储存,每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里,objectStore就一定于关全面据库里的表。IndexedDB可以有不少objectStore,objectStore里可以有成百上千对象。每个对象足以用key值获取。

IndexedDB vs LocalStorage

IndexedDB和LocalStorage都是用来在浏览器里储存数据,但它们利用不一致的技艺,有两样的用处,你要求按照自己的场馆突出的选料选择哪一类。LocalStorage是用key-value键值格局存储数据,但跟IndexedDB不均等的是,它的多少并不是按目标方式储存。它存储的多寡都是字符串格局。即使您想让LocalStorage存储对象,你需求看重JSON.stringify()能将目标变成字符串格局,再用JSON.parse()将字符串还原成对象。但即使要存储多量的复杂的数目,那并不是一种很好的方案。毕竟,localstorage就是专门为小数目多少安顿的,它的api是手拉手的。

IndexedDB很吻合储存大批量数目,它的API是异步调用的。IndexedDB使用索引存储数据,种种数据库操作放在工作中施行。IndexedDB甚至还扶助不难的数据类型。IndexedDB比localstorage强大得多,但它的API也针锋相对复杂。

对此简易的数额,你应当继续选择localstorage,但当您愿意存储大批量数据时,IndexedDB会显著的更符合,IndexedDB能提供您越来越复杂的询问数据的法子。

IndexedDB vs Web SQL

WebSQL也是一种在浏览器里积存数据的技艺,跟IndexedDB差其他是,IndexedDB更像是一个NoSQL数据库,而WebSQL更像是关系型数据库,使用SQL查询数据。W3C已经不再援救那种技术。具体景况请看:http://www.w3.org/TR/webdatabase/

因为不再协理,所以你就不用在档次中接纳那种技能了。

IndexedDB vs Cookies

库克ies(小甜点)听起来很好吃,但实在并不是。每一趟HTTP接受和发送都会传送Cookies数据,它会占有额外的流量。例如,假使您有一个10KB的Cookies数据,发送10次呼吁,那么,总括就会有100KB的多少在网络上传输。库克ies只好是字符串。浏览器里储存Cookies的长空有限,很多用户禁止浏览器拔取Cookies。所以,Cookies只好用来储存小量的非关键的数量。

IndexedDB的用法

想要了然IndexedDB,最好的点子是开创一个概括的web应用:把你们班的学员的学号和人名存储在IndexedDB里。IndexedDB里提供了简要的增、删、改、查接口。

打开一个IndexedDB数据库

首先,你须要了然您的浏览器是或不是帮助IndexedDB。请使用新型版的谷歌浏览器或火狐浏览器。低版本的IE是那一个的。

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

if(!window.indexedDB)
{
    console.log("你的浏览器不支持IndexedDB");
}

NoSQL,设若你的浏览器帮忙IndexedDB,大家就足以打开它。你不可能直接打开IndexedDB数据库。IndexedDB须要您创立一个伸手来打开它。

 var request = window.indexedDB.open("testDB", 2);

首先个参数是数据库的称号,首个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。

但您增添数据库版本号时,会接触onupgradeneeded事件,那时可能会出现成功、败北和阻拦事件两种情况。

var db;
request.onerror = function(event){
    console.log("打开DB失败", event);
}
request.onupgradeneeded   = function(event){
    console.log("Upgrading");
    db = event.target.result;
    var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });
};
request.onsuccess  = function(event){
    console.log("成功打开DB");
    db = event.target.result;
}

onupgradeneeded事件在首先次打开页面开端化数据库时会被调用,或在当有版本号变化时。所以,你应当在onupgradeneeded函数里创制你的积存数据。如若没有版本号变化,而且页面从前被打开过,你会取得一个onsuccess事件。假诺有不当爆发时则触发onerror事件。假诺你从前从未关闭连接,则会触发onblocked事件。

在上头的代码片段里,大家创造了一个Object
Store,叫做“students”,用“rollNo”做多少键名。

往ObjectStore里猛增对象

为了往数据库里新增多少,大家率先须求创设一个事情,并必要有所读写权限。在indexedDB里别的的存取对象的操作都要求放在工作里举办。

var transaction = db.transaction(["students"],"readwrite");
transaction.oncomplete = function(event) {
    console.log("Success");
};

transaction.onerror = function(event) {
    console.log("Error");
};  
var objectStore = transaction.objectStore("students");

objectStore.add({rollNo: rollNo, name: name});

从ObjectStore里删除对象

剔除跟新增一样,需要创设工作,然后调用删除接口,通过key删除对象。

db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);

我把语句合并到了同步,变得更简便易行,但效用是相同的。

透过key取出对象

get()措施里传来对象的key值,取出相应的目的。

var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);
request.onsuccess = function(event){
    console.log("Name : "+request.result.name);    
};

更新一个对象

为了立异一个目的,首先要把它取出来,修改,然后再放回去。

var transaction = db.transaction(["students"],"readwrite");
var objectStore = transaction.objectStore("students");
var request = objectStore.get(rollNo);
request.onsuccess = function(event){
    console.log("Updating : "+request.result.name + " to " + name);
    request.result.name = name;
    objectStore.put(request.result);
};

所有的源代码都在这里。如果有任何的问题,请留言,或通过 @歪脖骇客 给我私信
网站地图xml地图