`

IndexedDB:浏览器里内置的数据库

 
阅读更多

文章源自:http://www.webhek.com/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

Cookies(小甜点)听起来很好吃,但实际上并不是。每次HTTP接受和发送都会传递Cookies数据,它会占用额外的流量。例如,如果你有一个10KB的Cookies数据,发送10次请求,那么,总计就会有100KB的数据在网络上传输。Cookies只能是字符串。浏览器里存储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");
}

       一旦你的浏览器支持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);
};

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

 

关于更深入的信息,请参考http://www.ibm.com/developerworks/cn/web/wa-indexeddb/

 

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    indexedDB:具有indexedDB的任务管理器

    IndexedDB是浏览器内置的一种离线存储解决方案,用于在用户本地存储大量结构化数据,非常适合用来构建任务管理器这类需要持久化数据的应用。 **描述解读:** 描述简单明了,表明这是一个利用IndexedDB实现的任务...

    在windows8、Android、IOS上使用indexedDB

    对于Android,IndexedDB同样被内置在Chrome和Firefox等现代浏览器中。Android开发者可以使用WebViews来构建混合应用,或者直接在Web应用中利用IndexedDB进行离线数据存储。需要注意的是,不同的Android浏览器可能有...

    benchmark-indexeddb:Dexie越しのindexeddbにおいて,どのスキーマがどのように动作するのか确认するリポジトリ

    IndexedDB作为浏览器内置的NoSQL数据库,为开发者提供了离线存储和大规模数据管理的能力。而Dexie是一个轻量级的库,它封装了IndexedDB的复杂性,提供了一个更易用的API。本篇文章将深入探讨标题中的“benchmark-...

    BlasorIndexedDb:使用Blazor从C#管理indexedDb

    BlasorIndexedDb是一个专为Blazor框架设计的库,它允许开发者在C#中方便地管理和操作IndexedDB,这是一个浏览器内置的NoSQL数据库。IndexedDB主要用于存储大量数据,支持离线应用,非常适合Web应用程序中的数据缓存...

    使用Dexie对IndexedDB进行透明加密.zip

    IndexedDB是浏览器内置的一种强大的NoSQL数据库,可以存储大量结构化数据。然而,尽管IndexedDB提供了数据持久化,但其默认情况下并未对数据进行加密,这可能引发安全问题。为了保护用户数据,开发者可以采用第三方...

    SQLJs-And-IndexedDb-playGround

    SQLJs是一个JavaScript库,它允许在浏览器环境中使用SQLite数据库,而IndexedDB是Web浏览器内置的一个非关系型(NoSQL)数据库系统。这两者都是客户端数据存储解决方案,它们在离线应用、数据缓存以及大型数据管理等...

    indexedDbTest:WebSQL和IndexedDB性能的比较

    IndexedDB是另一种浏览器内置的非关系型数据库,它更倾向于NoSQL风格的数据存储。相比于WebSQL,IndexedDB提供了更为复杂的数据结构,如键值对、对象存储和索引,这使得它更适合存储结构化数据。IndexedDB的优势在于...

    V-Shop:Vue内置的小商店管理系统https

    ,后来看算了,就重新写了一个,为了统一样式和学点新东西,就使用了iview库统一UI,使用IndexedDB实现数据的存储读取,不过IndexedDB这种浏览器端的数据库有个最大的问题就是不安全,一打开控制台就什么都暴露了,...

    sms.db:在Web浏览器中读取iPhone上的sms.db文件

    这种技术通常基于WebSQL或者IndexedDB,它们是浏览器内置的数据库系统,可以处理SQLite格式的数据。 在标签中提到了"JavaScript",这意味着实现这个功能的工具或代码可能是用JavaScript编写的,这门语言在前端开发...

    wo代码相关数据库文件IDB

    1. IndexedDB:一种浏览器内置的NoSQL数据库,用于本地数据存储。 2. 客户端存储:在用户的设备上存储数据,支持离线应用和提高用户体验。 3. 事务处理:确保数据的一致性和完整性。 4. 异步操作:不影响用户界面的...

    ImmortalDB用于浏览器的弹性键值存储数据库

    ImmortalDB是一款专为浏览器设计的弹性键值存储数据库,主要应用于JavaScript开发中,尤其适合在Web应用中处理数据持久化存储的需求。它提供了一种可靠且高效的方式来管理用户数据,即使面临浏览器刷新、崩溃或者...

    frost:浏览器(或服务器)中的事件存储

    5. **事件存储**:Frost可能提供了一种机制,用于存储和检索已发生的事件,这可能涉及到数据持久化,如使用localStorage或IndexedDB将事件数据存储在浏览器中,或在服务器端使用数据库。 6. **跨域事件**:在某些...

    前端开源库-idb

    `idb` 是一个前端开源库,它的主要目的是为了简化对浏览器内置的 IndexedDB 数据库的使用。IndexedDB 是一种在客户端存储大量结构化数据的低级 API,支持索引,并且是异步的,非常适合进行离线存储或大数据量的应用...

    前端项目-dexie.zip

    Dexie 是一个针对 IndexedDB 的轻量级封装库,它简化了对浏览器内置的 IndexedDB 数据库的操作,提供了更加友好的 API 和更强大的功能。本篇文章将深入探讨 Dexie 在前端项目中的运用及其核心概念。 1. **IndexedDB...

    使用JsStore在IndexedDB中进行CRUD操作

    IndexedDB作为浏览器内置的NoSQL数据库,为开发者提供了存储和管理大量结构化数据的能力。而JsStore是一个轻量级的JavaScript库,它简化了与IndexedDB的交互,使得CRUD(创建、读取、更新、删除)操作变得更为简单易...

    网页浏览器源代码技术资料

    6. **Web API**:包括DOM操作、AJAX(异步JavaScript和XML)、WebSocket进行实时通信、Web Workers处理后台任务、Web Storage(本地存储)和IndexedDB(数据库存储)等,它们扩展了JavaScript的功能,使得浏览器可以...

    浏览器g-o-o-l-e文件

    3. **隐私和数据管理**:`src`文件可能包含用户的浏览数据,如Cookie(用于存储用户偏好和登录信息)、本地存储(用于Web应用存储数据)和IndexedDB(一个NoSQL数据库)。用户可以通过Chrome的设置来管理这些数据,...

    LocalForage改进的离线存储

    LocalForage是一款JavaScript库,它提供了改进的离线存储解决方案,尤其针对IndexedDB、WebSQL和localStorage这三种浏览器原生的本地存储机制。这个库的主要目的是简化数据存储操作,为开发者提供一个统一且高效的...

Global site tag (gtag.js) - Google Analytics