当按下delete按钮时，将删除indexedDb存储。试着在一个按钮的eventlistener中运行它，像这样:let transaction = db.deleteObjectStore('names')，但它没有删除存储，甚至没有显示错误。
文档表明在onupgradeneeded事件处理程序中使用deleteObjectStore，我无法在onupgradenrequired之外的按钮中执行deleteObjectStore
所以它是这样的:
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>这个问题显示了对如何使用索引DB API的几个误解。deleteObjectStore()调用只能在升级事务中调用。这是因为它从根本上改变了结构或"图式"数据库的。模式应该只在数据库的行为要改变时才改变——例如，你已经改变了代码使用数据库的方式。如果您考虑动态地添加和删除对象存储，那么您"做错了"。相反，对象存储集应该保持不变，直到您更改代码，并且对于给定版本的代码，您应该在存储中添加和删除记录。