HTML5 - IndexedDB

इंडेक्सडब एक नई एचटीएमएल 5 अवधारणा है जो उपयोगकर्ता के ब्राउज़र के अंदर डेटा को स्टोर करने के लिए है। अनुक्रमित स्थानीय भंडारण की तुलना में अधिक शक्ति है और उन अनुप्रयोगों के लिए उपयोगी है जिनके लिए बड़ी मात्रा में डेटा संग्रहीत करने की आवश्यकता होती है। ये एप्लिकेशन अधिक दक्षता से चल सकते हैं और तेजी से लोड हो सकते हैं।

Indexeddb का उपयोग क्यों करें?

W3C ने घोषणा की है कि वेब एसक्यूएल डेटाबेस एक डिप्रेक्टेड लोकल स्टोरेज स्पेसिफिकेशन है, इसलिए वेब डेवलपर को इस तकनीक का उपयोग नहीं करना चाहिए। अनुक्रमित वेब SQL डेटा बेस के लिए एक विकल्प है और पुरानी तकनीकों की तुलना में अधिक प्रभावी है।

विशेषताएं

यह कुंजी-जोड़ी मूल्यों को संग्रहीत करता है
यह एक संबंधपरक डेटाबेस नहीं है
IndexedDB API ज्यादातर अतुल्यकालिक है
यह एक संरचित क्वेरी भाषा नहीं है
इसने एक ही डोमेन से डेटा एक्सेस करने का समर्थन किया है

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.")
}

एक IndexedDB डेटाबेस खोलें

डेटाबेस बनाने से पहले, हमें डेटा बेस के लिए कुछ डेटा तैयार करना होगा। कंपनी के कर्मचारी विवरण के साथ शुरुआत करें।

const employeeData = [
   { id: "01", name: "Gopal K Varma", age: 35, email: "[email protected]" },
   { id: "02", name: "Prasad", age: 24, email: "[email protected]" }
];

डेटा जोड़ना

यहाँ कुछ डेटा मैन्युअल रूप से डेटा में जोड़ा जा रहा है जैसा कि नीचे दिखाया गया है -

function add() {
   var request = db.transaction(["employee"], "readwrite")
   .objectStore("employee")
   .add({ id: "01", name: "prasad", age: 24, email: "[email protected]" });
   
   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! ");
   }
}

डाटा लिया जा रहा है

हम प्राप्त () के साथ डेटा बेस से डेटा पुनः प्राप्त कर सकते हैं

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!");
      }
   };
}

डेटा निकालना

हम IndexedDB से डेटा को हटा सकते हैं () के साथ। यहां बताया गया है कि कोड कैसा दिखता है

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">
         
         //prefixes of implementation that we want to test
         window.indexedDB = window.indexedDB || window.mozIndexedDB || 
         window.webkitIndexedDB || window.msIndexedDB;
         
         //prefixes of window.IDB objects
         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: "[email protected]" },
            { id: "00-02", name: "prasad", age: 32, email: "[email protected]" }
         ];
         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) {
               // Do something with the 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: "[email protected]" });
            
            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>

यह निम्नलिखित उत्पादन का उत्पादन करेगा -