idb-partitioned-persistence-iframe.html (1930B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script> 4 const dbName = "users"; 5 6 // Create the database at v1 and detect success via `onsuccess`. 7 function createDatabase() { 8 return new Promise((resolve, reject) => { 9 var dbRequest = window.indexedDB.open(dbName, 1); 10 dbRequest.onblocked = () => reject(); 11 dbRequest.onerror = () => reject(); 12 dbRequest.onsuccess = (e) => { 13 e.target.result.close(); 14 resolve(); 15 } 16 }); 17 } 18 19 // Open the database at v2 and detect existance via `onupgradeneeded`. 20 function doesDatabaseExist() { 21 let didExist = false; 22 return new Promise((resolve, reject) => { 23 var dbRequest = window.indexedDB.open(dbName, 2); 24 dbRequest.onblocked = () => reject(); 25 dbRequest.onerror = () => reject(); 26 dbRequest.onsuccess = (e) => { 27 e.target.result.close(); 28 deleteDatabase().then(() => resolve(didExist)); 29 }; 30 dbRequest.onupgradeneeded = (e) => { 31 didExist = e.oldVersion != 0; 32 }; 33 }); 34 } 35 36 // Delete the database and detect success via `onsuccess`. 37 function deleteDatabase() { 38 return new Promise((resolve, reject) => { 39 var dbRequest = window.indexedDB.deleteDatabase(dbName); 40 dbRequest.onblocked = () => reject(); 41 dbRequest.onerror = () => reject(); 42 dbRequest.onsuccess = () => resolve(); 43 }); 44 } 45 46 // Step 2 47 window.addEventListener("load", () => { 48 parent.postMessage( 49 {message: "iframe loaded"}, 50 "*", 51 ); 52 }); 53 54 window.addEventListener("message", (e) => { 55 if (e.data.message == "create database") { 56 // Step 4 57 createDatabase().then(() => { 58 parent.postMessage( 59 {message: "database created"}, 60 "*", 61 ); 62 }); 63 } else if (e.data.message == "check database") { 64 // Step 6 65 doesDatabaseExist().then((result) => { 66 parent.postMessage( 67 { 68 message: "database checked", 69 doesDatabaseExist: result, 70 }, 71 "*", 72 ); 73 }); 74 } 75 }); 76 </script>