HTML5 - IndexedDB

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

为什么要使用indexeddb？

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

功能

• 它存储密钥对值

• 它不是关系数据库

• IndexedDB API主要是异步的

• 它不是结构化查询语言

• 它支持从同一个域访问数据

IndexedDB

在进入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: "admin@it1352.com" },   { id: "02", name: "Prasad", age: 24, email: "prasad@IT屋.com" }];

添加数据

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

function add() {   var request = db.transaction(["employee"], "readwrite")   .objectStore("employee")   .add({ id: "01", name: "prasad", age: 24, email: "prasad@IT屋.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()从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事件中使用的所有数据，如下所示代码 :

                              Read                   Delete    

最终代码应为 :

                                 //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: "gopal@IT屋.com" },            { id: "00-02", name: "prasad", age: 32, email: "prasad@IT屋.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) {               // 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: "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.");            };         }                        Read       Read all       Add data       Delete data