IndexedDB 未找到指定的对象存储区之一

jfewjypa 于 2023-09-28 发布在 IndexedDB

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

超文本标记语言：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../css/create-card.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card - Create Card</title>
</head>
<body>
    <div class="main-div-container">
        <div class="input-div-container">
            <div class="front-label-div-container">
                <label>Front Page</label>
            </div>
            <div class="front-page-input-div-container">
                <input type="text" class="front-page-input" id="front-page-input">
            </div>
        </div>
        <div class="input-div-container">
            <div class="back-label-div-container">
                <label>Back Page</label>
            </div>
            <div class="back-page-input-div-container">
                <input type="text" class="front-page-input" id="back-page-input">
            </div>
        </div>
        <div class="button-div-container">
            <button class="button" id="button">Save</button>
        </div>
        <div class="other-cards">
            <a href="/cards">
                <button class="other-cards-button">Other Cards</button>
            </a>
        </div>
    </div>
    <script src="../js/create-card.js"></script>
</body>
</html>

JavaScript代码：

const frontArea = document.getElementById("front-page-input");
const backArea = document.getElementById("back-page-input");
const saveButton = document.getElementById("button");

localStorage.setItem("cardAmount", 0)

const indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB ||
    window.shimIndexedDB;
const request = indexedDB.open("Cards-Database", 1)

request.onerror = () => {
    alert("Problem happened in the database");
};

request.onupgradeneeded = () => {
    const database = request.result;
    const DbObjectStore = database.createObjectStore("card-values", { keyPath: id })

    DbObjectStore.createIndex("front-value", ["front"], { unique: false })
    DbObjectStore.createIndex("back-value", ["back"], { unique: false })
};

request.onsuccess = () => {
    const database = request.result;
    const transaction = database.transaction("card-values", "readwrite");
    const cardStore = transaction.objectStore("card-values");

    saveButton.addEventListener("click", () => {
        const frontValue = frontArea.value;
        const backValue = backArea.value;
        const cardAmount = localStorage.getItem("cardAmount") + 1;

        localStorage.removeItem("cardAmount");
        localStorage.setItem("cardAmount", cardAmount);
        cardStore.add({ id: cardAmount, front: frontValue, back: backValue});
    });
    alert("Card Created");
}

目的是保存学习提醒卡。我得到：
错误：未捕获DOMException：无法在“IDBDatabase’”上执行“transaction”：找不到指定的对象存储之一。
数据库名称：

indexeddb

来源：https://stackoverflow.com/questions/77118433/one-of-the-specified-object-stores-was-not-found

1条答案

按热度按时间

plupiseo1#

您的代码中有一些错误。以下是解决方案;
错误1

const cardAmount = localStorage.getItem("cardAmount") + 1;

在这里，当从localstorage获取cardAmount变量时，必须将此变量转换为int值。否则，会有如下输出：“01”，“011”……
错误2

const DbObjectStore = database.createObjectStore("card-values", { keyPath: id })

在这里，必须以字符串形式给予id参数，也就是说，它应该在“id”中。
错误3
要获取输入值并将其保存到数据库中，您可以在数据库访问成功后立即启动一个事务，但要等到用户按下按钮才能执行此事务。IndexedDb不支持此类操作。这就是为什么你应该在按下按钮的同时开始交易。这样问题就解决了。

纠正所有3个错误后的结果代码;

const frontArea = document.getElementById("front-page-input");
const backArea = document.getElementById("back-page-input");
const saveButton = document.getElementById("button");

localStorage.setItem("cardAmount", 0)

const indexedDB =
    window.indexedDB ||
    window.mozIndexedDB ||
    window.webkitIndexedDB ||
    window.msIndexedDB ||
    window.shimIndexedDB;
const request = indexedDB.open("Cards-Database", 1)

request.onerror = () => {
    alert("Problem happened in the database");
};

request.onupgradeneeded = () => {
    const database = request.result;
    const DbObjectStore = database.createObjectStore("card-values", { keyPath: "id" })

    DbObjectStore.createIndex("front-value", ["front"], { unique: false })
    DbObjectStore.createIndex("back-value", ["back"], { unique: false })
};

request.onsuccess = () => {
    const database = request.result;

    saveButton.addEventListener("click", () => {
        const frontValue = frontArea.value;
        const backValue = backArea.value;
        
        // Fix for localStorage: Convert cardAmount to int
        const cardAmount = Number(localStorage.getItem("cardAmount")) + 1;

        localStorage.removeItem("cardAmount");
        localStorage.setItem("cardAmount", cardAmount);
        
        // Move the transaction and objectStore creation here
        const transaction = database.transaction("card-values", "readwrite");
        const cardStore = transaction.objectStore("card-values");
        
        cardStore.add({ id: cardAmount, front: frontValue, back: backValue });

        transaction.oncomplete = function(event) {
            alert("Card Add Successfully");
        };
    
        transaction.onerror = function(event) {
            alert("error when try add card");
        };
        
    });

    alert("Card Created");
}

赞(0）回复(0）举报 2023-09-28

我来回答

IndexedDB 未找到指定的对象存储区之一

1条答案

相关问题

热门标签

最新问答