`

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

html5indexdb 
阅读更多

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是不行的。

Js代码  收藏代码
  1. window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;  
  2.   
  3. if(!window.indexedDB)  
  4. {  
  5.     console.log("你的浏览器不支持IndexedDB");  
  6. }  

 

一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。

Js代码  收藏代码
  1. var request = window.indexedDB.open("testDB", 2);  

 

第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。

 

但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况。

Js代码  收藏代码
  1. var db;  
  2. request.onerror = function(event){  
  3.     console.log("打开DB失败", event);  
  4. }  
  5. request.onupgradeneeded   = function(event){  
  6.     console.log("Upgrading");  
  7.     db = event.target.result;  
  8.     var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });  
  9. };  
  10. request.onsuccess  = function(event){  
  11.     console.log("成功打开DB");  
  12.     db = event.target.result;  
  13. }  

 

onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。如果有错误发生时则触发onerror事件。如果你之前没有关闭连接，则会触发onblocked事件。

 

在上面的代码片段里，我们创建了一个Object Store，叫做“students”，用“rollNo”做数据键名。

 

往ObjectStore里新增对象

为了往数据库里新增数据，我们首先需要创建一个事务，并要求具有读写权限。在indexedDB里任何的存取对象的操作都需要放在事务里执行。

Js代码  收藏代码
  1. var transaction = db.transaction(["students"],"readwrite");  
  2. transaction.oncomplete = function(event) {  
  3.     console.log("Success");  
  4. };  
  5.   
  6. transaction.onerror = function(event) {  
  7.     console.log("Error");  
  8. };    
  9. var objectStore = transaction.objectStore("students");  
  10.   
  11. objectStore.add({rollNo: rollNo, name: name});  

 

从ObjectStore里删除对象

删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。

Js代码  收藏代码
  1. db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);  

 

我把语句合并到了一起，变得更简单，但效果是一样的。

 

通过key取出对象

往get()方法里传入对象的key值，取出相应的对象。

Js代码  收藏代码
  1. var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);  
  2. request.onsuccess = function(event){  
  3.     console.log("Name : "+request.result.name);      
  4. };  

 

更新一个对象

为了更新一个对象，首先要把它取出来，修改，然后再放回去。

Js代码  收藏代码
  1. var transaction = db.transaction(["students"],"readwrite");  
  2. var objectStore = transaction.objectStore("students");  
  3. var request = objectStore.get(rollNo);  
  4. request.onsuccess = function(event){  
  5.     console.log("Updating : "+request.result.name + " to " + name);  
  6.     request.result.name = name;  
  7.     objectStore.put(request.result);  
  8. };  

 

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

原文：http://www.webhek.com/indexeddb/

 

代码：

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>IndexedDB</title>  
  5.         <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  
  6.         <script type="text/javascript">  
  7.             $(document).ready(function(){  
  8.                 windowwindow.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;  
  9.   
  10.                 var request, db;  
  11.                   
  12.                 if(!window.indexedDB)  
  13.                 {  
  14.                     console.log("Your Browser does not support IndexedDB");  
  15.                 }  
  16.                 else  
  17.                 {  
  18.                     request = window.indexedDB.open("testDB", 2);  
  19.                     request.onerror = function(event){  
  20.                         console.log("Error opening DB", event);  
  21.                     }  
  22.                     request.onupgradeneeded = function(event){  
  23.                         console.log("Upgrading");  
  24.                         db = event.target.result;  
  25.                         var objectStore = db.createObjectStore("students", { keyPath : "rollNo" });  
  26.                     };  
  27.                     request.onsuccess = function(event){  
  28.                         console.log("Success opening DB");  
  29.                         db = event.target.result;  
  30.                     }  
  31.                 }  
  32.                   
  33.                 $("#addBtn").click(function(){  
  34.                     var name = $("#name").val();  
  35.                     var rollNo = $("#rollno").val();  
  36.                       
  37.                     var transaction = db.transaction(["students"],"readwrite");  
  38.                     transaction.oncomplete = function(event) {  
  39.                         console.log("Success :)");  
  40.                         $("#result").html("Add : Success");  
  41.                     };  
  42.                       
  43.                     transaction.onerror = function(event) {  
  44.                         console.log("Error :(");  
  45.                         $("#result").html("Add : Error");  
  46.                     };  
  47.                     var objectStore = transaction.objectStore("students");  
  48.                       
  49.                     objectStore.add({rollNo: rollNo, name: name});  
  50.                 });  
  51.                   
  52.                 $("#removeBtn").click(function(){  
  53.                     var rollNo = $("#rollno").val();  
  54.                     db.transaction(["students"],"readwrite").objectStore("students").delete(rollNo);  
  55.                 });  
  56.   
  57.                 $("#getBtn").click(function(){  
  58.                     var rollNo = $("#rollno").val();  
  59.                     var request = db.transaction(["students"],"readwrite").objectStore("students").get(rollNo);  
  60.                     request.onsuccess = function(event){  
  61.                         $("#result").html("Name : "+request.result.name);  
  62.                     };  
  63.                 });  
  64.                   
  65.                 $("#updateBtn").click(function(){  
  66.                     var rollNo = $("#rollno").val();  
  67.                     var name = $("#name").val();  
  68.                     var transaction = db.transaction(["students"],"readwrite");  
  69.                     var objectStore = transaction.objectStore("students");  
  70.                     var request = objectStore.get(rollNo);  
  71.                     request.onsuccess = function(event){  
  72.                         $("#result").html("Updating : "+request.result.name + " to " + name);  
  73.                         request.result.name = name;  
  74.                         objectStore.put(request.result);  
  75.                     };  
  76.                 });  
  77.             });  
  78.         </script>  
  79.     </head>  
  80.     <body>  
  81.         <form>  
  82.             Roll No <input type="text" name="rollno" id="rollno"/><br>  
  83.             Name <input type="text" name="name" id="name" /><br>  
  84.             <input type="button" name="addBtn" value="Add" id="addBtn"/>  
  85.             <input type="button" name="removeBtn" value="Remove" id="removeBtn"/>  
  86.             <input type="button" name="getBtn" value="Get" id="getBtn"/>  
  87.             <input type="button" name="updateBtn" value="Update" id="updateBtn"/>  
  88.         </form>  
  89.         <div id="result"></div>  
  90.     </body>  
  91. </html>  
分享到：
| Raphael调研例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    1. 打开数据库：使用`window.indexedDB.open()`方法，指定数据库名、版本和选项。 2. 创建或升级数据库：当数据库版本改变时，会触发`onupgradeneeded`事件，此时可以创建或修改对象存储和索引。 3. 执行操作：通过...

    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的优势在于...

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

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

    wo代码相关数据库文件IDB

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

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

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

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

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

    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这三种浏览器原生的本地存储机制。这个库的主要目的是简化数据存储操作，为开发者提供一个统一且高效的...

Magicbox
Global site tag (gtag.js) - Google Analytics