This post will be an example rather than tutorial. I don’t know why but it seems people just can’t post
simple examples or w3 can’t update their site for the simplest api.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 |
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 dbName = "testDB"; var request = indexedDB.open(dbName, 2); request.onerror = function(event) { console.log("db error"); }; request.onupgradeneeded = function(event) { var db = event.target.result; var productObjectStore = db.createObjectStore("products", { keyPath: "productNumber" }); productObjectStore.createIndex("name", "name", { unique: true }); persistProducts(); console.log("db created"); }; function persistProducts(){ var request = indexedDB.open(dbName, 2); request.onsuccess = function(event) { var db = event.target.result; var transaction = db.transaction("products", "readwrite"); var objectStore = transaction.objectStore("products"); var data = [{productNumber:1,name:"product1",price:33.22}]; data.forEach( function (product) { objectStore.put(product); }); transaction.oncomplete = function() { console.log("products saved"); }; }; } function getProductByKey(key) { var request = indexedDB.open(dbName); request.onsuccess = function(event) { var db = event.target.result; var transaction = db.transaction("products", "readonly"); var objectStore = transaction.objectStore("products"); var query = objectStore.get(key); query.onerror = function(queryEvent) { console.log("Unable to retrieve data from database!"); }; query.onsuccess = function(queryEvent) { console.log(queryEvent.target.result); var product1 = queryEvent.target.result; // do stuff with the product // provide a callback parameter to execute here }; }; } function getProductByName(name) { var request = indexedDB.open(dbName); request.onsuccess = function(event) { var db = event.target.result; var transaction = db.transaction("products", "readonly"); var objectStore = transaction.objectStore("products"); var index = objectStore.index('name'); var query = index.get(name); query.onerror = function(queryEvent) { console.log("Unable to retrieve data from database!"); }; query.onsuccess = function(queryEvent) { console.log(queryEvent.target.result); var product1 = queryEvent.target.result; // do stuff with the product // provide a callback parameter to execute here }; }; } function deletedb(){ var req = indexedDB.deleteDatabase(dbName); console.log("db deleted"); } |
Usage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> <p><button onclick="deletedb()">DBDelete</button></p> <p><button onclick="getProductByKey(1)">GetProduct By Key</button></p> <p><button onclick="getProductByName('product1')">GetProduct By Name</button></p> <script src="index.js"></script> </body> </html> |