HTML5 - IndexedDB

HTML5 - IndexedDB 首页 / HTML5入门教程 / HTML5 - IndexedDB

indexeddb是一个新的HTML5概念,用于将数据存储在用户的浏览器中,indexeddb比本地存储更强大,对于需要存储大量数据的应用程序很有用。这些应用程序可以运行更高的效率并更快地加载。

W3C宣布Web SQL数据库是已弃用的本地存储规范,因此Web开发人员不应再使用此技术。 indexeddb是Web SQL数据库的替代方法,比旧技术更有效。

在进入indexeddb之前,无涯教程需要添加一些实现的前缀,如下所示

window.indexedDB=window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || 
window.msIndexedDB;
 
window.IDBTransaction=window.IDBTransaction || window.webkitIDBTransaction || 
window.msIDBTransaction;
window.IDBKeyRange=window.IDBKeyRange || 
window.webkitIDBKeyRange || window.msIDBKeyRange
 
if (!window.indexedDB) {
   window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

打开数据库

在创建数据库之前,必须为数据库准备一些数据。从公司员工详细信息开始。

const employeeData=[
   { id: "01", name: "Gopal K Varma", age: 35, email: "contact@learnfk.com" },
   { id: "02", name: "Prasad", age: 24, email: "prasad@learnfk.com" }
];

添加数据

这里手动将一些数据添加到数据中,如下所示-

function add() {
   var request=db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "prasad@learnfk.com" });
   
   request.onsuccess=function(event) {
      alert("Prasad has been added to your database.");
   };
   
   request.onerror=function(event) {
      alert("Unable to add data\r\nPrasad is already exist in your database! ");
   }
}

检索数据

可以使用get()从数据库中检索数据

function read() {
   var transaction=db.transaction(["employee"]);
   var objectStore=transaction.objectStore("employee");
   var request=objectStore.get("00-03");
   
   request.onerror=function(event) {
      alert("Unable to retrieve daa from database!");
   };
   
   request.onsuccess=function(event) {
      
      if(request.result) {
         alert("Name: " + request.result.name + ", Age: 
            " + request.result.age + ", Email: " + request.result.email);
      } else {
         alert("Kenny couldn't be found in your database!");  
      }
   };
}

与get()一起使用,可以将数据存储在对象中,而不是将数据存储在游标中,并且可以从游标中检索数据。

function readAll() {
   var objectStore=db.transaction("employee").objectStore("employee");
   
   objectStore.openCursor().onsuccess=function(event) {
      var cursor=event.target.result;
      
      if (cursor) {
         alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
            Age: " + cursor.value.age + ", Email: " + cursor.value.email);
         cursor.continue();
      } else {
         alert("No more entries!");
      }
   };
}

删除数据

可以使用remove()从indexofdb中删除数据。代码如下所示

function remove() {
   var request=db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .delete("02");
   
   request.onsuccess=function(event) {
      alert("prasad entry has been removed from your database.");
   };
}

HTML代码

为了显示所有数据,需要使用onClick事件,如下代码所示:

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>IndexedDb Demo | onlyWebPro.com</title>
   </head>
   
   <body>
      <button onclick="read()">Read </button>
      <button onclick="readAll()"></button>
      <button onclick="add()"></button>
      <button onclick="remove()">Delete </button>
   </body>
</html>

最终代码应为-

<!DOCTYPE html>

<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script type="text/javascript">
         
         //我们要测试的实现前缀
         window.indexedDB=window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //window.IDB 对象的前缀
         window.IDBTransaction=window.IDBTransaction || 
         window.webkitIDBTransaction || window.msIDBTransaction;
         window.IDBKeyRange=window.IDBKeyRange || window.webkitIDBKeyRange || 
         window.msIDBKeyRange
         
         if (!window.indexedDB) {
            window.alert("Your browser doesn't support a stable version of indexedDB.")
         }
         
         const employeeData=[
            { id: "00-01", name: "gopal", age: 35, email: "gopal@learnfk.com" },
            { id: "00-02", name: "prasad", age: 32, email: "prasad@learnfk.com" }
         ];
         var db;
         var request=window.indexedDB.open("newDatabase", 1);
         
         request.onerror=function(event) {
            console.log("error: ");
         };
         
         request.onsuccess=function(event) {
            db=request.result;
            console.log("success: "+ db);
         };
         
         request.onupgradeneeded=function(event) {
            var db=event.target.result;
            var objectStore=db.createObjectStore("employee", {keyPath: "id"});
            
            for (var i in employeeData) {
               objectStore.add(employeeData[i]);
            }
         }
         
         function read() {
            var transaction=db.transaction(["employee"]);
            var objectStore=transaction.objectStore("employee");
            var request=objectStore.get("00-03");
            
            request.onerror=function(event) {
               alert("Unable to retrieve daa from database!");
            };
            
            request.onsuccess=function(event) {
               //对 request.result 做点什么!
               if(request.result) {
                  alert("Name: " + request.result.name + ", 
                     Age: " + request.result.age + ", Email: " + request.result.email);
               } else {
                  alert("Kenny couldn't be found in your database!");
               }
            };
         }
         
         function readAll() {
            var objectStore=db.transaction("employee").objectStore("employee");
            
            objectStore.openCursor().onsuccess=function(event) {
               var cursor=event.target.result;
               
               if (cursor) {
                  alert("Name for id " + cursor.key + " is " + cursor.value.name + ", 
                     Age: " + cursor.value.age + ", Email: " + cursor.value.email);
                  cursor.continue();
               } else {
                  alert("No more entries!");
               }
            };
         }
         
         function add() {
            var request=db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .add({ id: "00-03", name: "Kenny", age: 19, email: "kenny@planet.org" });
            
            request.onsuccess=function(event) {
               alert("Kenny has been added to your database.");
            };
            
            request.onerror=function(event) {
               alert("Unable to add data\r\nKenny is aready exist in your database! ");
            }
         }
         
         function remove() {
            var request=db.transaction(["employee"], "readwrite")
            .objectStore("employee")
            .delete("00-03");
            
            request.onsuccess=function(event) {
               alert("Kenny's entry has been removed from your database.");
            };
         }
      </script>
      
   </head>
   <body>
      <button onclick="read()">Read </button>
      <button onclick="readAll()">Read all </button>
      <button onclick="add()">Add data </button>
      <button onclick="remove()">Delete data </button>
   </body>
</html>

它将产生以下输出-

无涯教程网

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

程序员进阶攻略 -〔胡峰〕

如何做好一场技术演讲 -〔极客时间〕

说透中台 -〔王健〕

Vim 实用技巧必知必会 -〔吴咏炜〕

数据分析思维课 -〔郭炜〕

PyTorch深度学习实战 -〔方远〕

搞定音频技术 -〔冯建元 〕

后端工程师的高阶面经 -〔邓明〕

AI 应用实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)