找不到指定的对象存储之一

问题描述 投票：0回答：1

HTML：

<!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”上执行“事务”：找不到指定的对象存储之一。

数据库：

javascript indexeddb
1个回答
0
投票

您的代码中有一些错误。这是解决方案；

错误1

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

这里，从localstorage获取cardAmount变量时，必须将该变量转换为int值。否则，会有这样的输出：“01”，“012”...

错误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");
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.