IndexedDB如何删除列表中的最后一个条目？答案

【问题标题】：IndexedDB how to delete the last entry in a list?IndexedDB如何删除列表中的最后一个条目？
【发布时间】：2021-11-28 02:34:15
【问题描述】：

（在以下网站上找到 https://javascript.info/indexeddb#object-store）此 JavaScript 函数使用 indexeddb 将带有数据的书籍添加到列表中。这些功能还允许用户删除列表中的所有数据以及显示数据。

<!doctype html>
<script src="https://cdn.jsdelivr.net/npm/idb@3.0.2/build/idb.min.js"></script>

<button onclick="addBook()">Add a book</button>
<button onclick="clearBooks()">Clear books</button>

<p>Books list:</p>

<ul id="listElem"></ul>

<script>
let db;

init();

async function init() {
  db = await idb.openDb('booksDb', 1, db => {
    db.createObjectStore('books', {keyPath: 'name'});
  });

  list();
}

async function list() {
  let tx = db.transaction('books');
  let bookStore = tx.objectStore('books');

  let books = await bookStore.getAll();

  if (books.length) {
    listElem.innerHTML = books.map(book => `<li>
        name: ${book.name}, price: ${book.price}
      </li>`).join('');
  } else {
    listElem.innerHTML = '<li>No books yet. Please add books.</li>'
  }


}

async function clearBooks() {
  let tx = db.transaction('books', 'readwrite');
  await tx.objectStore('books').clear();
  await list();
}

async function addBook() {
  let name = prompt("Book name?");
  let price = +prompt("Book price?");

  let tx = db.transaction('books', 'readwrite');

  try {
    await tx.objectStore('books').add({name, price});
    await list();
  } catch(err) {
    if (err.name == 'ConstraintError') {
      alert("Such book exists already");
      await addBook();
    } else {
      throw err;
    }
  }
}

window.addEventListener('unhandledrejection', event => {
  alert("Error: " + event.reason.message);
});

</script>

从这个脚本中，我如何能够修改它，使其只删除添加到列表中的最后一个元素？例如，如果列表是

name: Star wars, price: 20
name: LOTR, price: 30
name: Harry Potter, price: 15

最后一个条目，哈利波特，会被删除吗？

这是我使用removeChild() 的尝试，但是这个实现会删除所有数据

$('#lastUser').on('click', function() {
  var user = $('#search').val();  
async function clearlastUser() {
  let tx = db.transaction('books', 'readwrite');
  await tx.objectStore('books').parentNode.removeChild(user);
  await list();
}
});

【问题讨论】：

标签： javascript indexeddb

【解决方案1】：

在库 idb here 的页面上，它显示了删除方法的示例。用它把一些东西放在一起，我会做这样的事情：

  let db;
  let idx;// declare variable for index of books

  init();

  async function init() {
    db = await idb.openDb("booksDb", 1, (db) => {
      db.createObjectStore("books", { keyPath: "name" });
    });
    list();
    idx = []; //define array to store keys
  }

  async function clearBooks() {
    let tx = db.transaction("books", "readwrite");
    await tx.objectStore("books").clear();
    await list();
    idx = []; //clear index
  }

  async function deleteBook(key) {
    key = idx[idx.length - 1]; //last key added to index
    let tx = db.transaction("books", "readwrite");
    await tx.objectStore("books").delete(key);
    await list();
  }

  async function addBook() {
    let name = prompt("Book name?");
    let price = +prompt("Book price?");

    let tx = db.transaction("books", "readwrite");
      
    await tx.objectStore("books").add({ name, price });
    await list();
    idx.push(name);//add key to index
}

看看这篇here 的帖子，似乎获取 JavaScript 对象的最后一项并不总是准确的，数组是更好的解决方案。不过你可能想自己去看看，因为我没有深入阅读它。

看看你的例子，如果数据库开始是空的，那么你可以在数据库中创建每本书的索引来跟踪那里的顺序。然后您可以访问该数组以获取相应的密钥。因此，例如 idx[0] 是添加到数据库中的第一本书的名称/键。

话虽如此，我对处理数据并不是很熟悉，因此可能有更好的解决方案或您正在使用的库的内置解决方案。我鼓励您查看文档：https://www.npmjs.com/package/idb/v/3.0.2

【讨论】：