Live Code::DevDic

JavaScript
Result
Run
License

window.addEventListener("load", () => {
    const $members = [
        { email: "john@demo.com", name: "John", age: 20 },
        { email: "merry@demo.com", name: "Merry", age: 21 },
        { email: "tom@demo.com", name: "Tom", age: 23 }
    ];

const $dbName = "example";
    const $dbVersion = 1;
    const $objectStoreName = "members";
    
	let db;
    const $idbOpenDbReq = window.indexedDB.open($dbName, $dbVersion);  
    
    $idbOpenDbReq.onsuccess = function() {
        console.log("onsuccess");
        console.log(`readyState: ${this.readyState}`);
        
        db = this.result;        
        [...db.objectStoreNames].forEach(name => console.log(`Object Store: ${name}`));       
        insert();
        display();
    };
    
    $idbOpenDbReq.onupgradeneeded = function(e) {
        console.log("upgradeneeded");        
        db = this.result;  
        init(e);
        db.createObjectStore($objectStoreName, {
        	keyPath: "email"
        });
    };
    
    
    function init(e) {
         if(e.oldVersion < $dbVersion) {       		
            [...db.objectStoreNames].forEach((objectStore, index) => {               
                if(objectStore.indexOf("members") > -1) {
            		db.deleteObjectStore(objectStore);  
                    console.log(`delete to ${objectStore}`);
                }
            });
        }     
    }
    
    
    function insert() {
        const $transaction = db.transaction($objectStoreName, "readwrite");
        const $objectStore = $transaction.objectStore($objectStoreName);
        
        $members.forEach(record => $objectStore.add(record));
    }
    
    function display() {
    	const $transaction = db.transaction($objectStoreName);  
        const $objectStore = $transaction.objectStore($objectStoreName);
        const $idbRequest = $objectStore.getAll();
        $idbRequest.onsuccess = e => {
            const aList = e.target.result;
            const elUl = document.createElement("ul"); 
            aList.forEach(obj => {
            	let elLi = document.createElement("li");
                elLi.textContent = `${obj.name}(${obj.age}): ${obj.email}`;
                elUl.append(elLi);
            }); 
            document.body.prepend(elUl);
        };
    }
});

Console