`

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调研例子
评论
发表评论

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

相关推荐

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