How to use deleteObjectStore in a button?

Question

When the delete button is pressed, the indexedDb store is deleted. Try running it inside a button's eventlistener like so: let transaction = db.deleteObjectStore('names') but it doesn't delete the store and it didn't even show the error.

The documentation indicates to use deleteObjectStore inside the onupgradeneeded event handler, i have not been able to execute deleteObjectStore in a button outside of onupgradeneeded

So this stays like this:

https://jsfiddle.net/f46rm03w/

 window.addEventListener('load', function() { // Create data base and store "names" let db; let request = indexedDB.open('namesDb', 1); request.onsuccess = function(e) { db = e.target.result; } request.onerror = function(e) { alert(e.target.errorCode); } request.onupgradeneeded = function(e) { db = e.target.result; let names = db.createObjectStore('names', {autoIncrement: true}); } // Add objects to store document.querySelector('#add').addEventListener('click', function(e) { let input = document.querySelector('input'); let transaction = db.transaction(['names'], 'readwrite'); let names = transaction.objectStore('names'); let name = {name: input.value}; names.add(name); transaction.oncomplete = function(e) { alert( '"' + input.value + '" has been added.'); // clear <input> input.value = ''; } transaction.onerror = function(e) { alert(e.target.errorCode); } }); // Here the object store is deleted document.querySelector('#delete').addEventListener('click', function(e) { let transaction = db.deleteObjectStore('names'); // Attempt to delete storage transaction.oncomplete = function(e) { alert('The store has been deleted'); } transaction.onerror = function(e) { alert(e.target.errorCode); } }); // Show all objects document.querySelector('#show').addEventListener('click', function(e) { let transaction = db.transaction(['names'], 'readonly'); let names = transaction.objectStore('names'); let show = ''; names.openCursor().onsuccess = function(e) { var cursor = e.target.result; if (cursor) { let key = cursor.key; let value = cursor.value.name; show += key + " " + value + '\n'; cursor.continue(); }else { alert(show); } }; }); });

 button{ margin-left: 10px; }

 <input type="text" placeholder="Type here"> <button id="add">Add</button> <button id="delete">Delete</button> <button id="show">Show</button>

Answer 1

The question shows a couple of misunderstandings of how the Indexed DB API should be used. The deleteObjectStore() call can only be called within an upgrade transaction. This is because it's fundamentally altering the structure or "schema" of the database. The schema should only change when the behavior of the database is intended to change - eg you've altered how your code is going to use the database. If you're thinking about adding and removing object stores dynamically, you're "doing it wrong". Instead, the set of object stores should remain constant until you alter the code, and for a given version of your code you should add and remove records from within the store.