IndexedDB如何删除列表中的最后一项？

vxbzzdmp 于 2022-12-16 发布在 IndexedDB

关注(0)|答案(1)|浏览(216)

（可在以下网站中找到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();
}
});

indexeddb

来源：https://stackoverflow.com/questions/69490676/indexeddb-how-to-delete-the-last-entry-in-a-list

1条答案

按热度按时间

mctunoxg1#

在库idb here的页面上，它显示了delete方法的一个例子。使用这个方法来组合一些东西，我会做如下的事情：

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

赞(0）回复(0）举报 2022-12-16

我来回答

IndexedDB如何删除列表中的最后一项？

1条答案

相关问题

热门标签

最新问答