在 Indexeddb 中获取和设置一个值

Question

这看起来很简单，但由于某些原因不起作用

要求是

查看Indexeddb中是否有特定值
Return值
如果值不存在或数据库不存在return空或空
如果return为空，创建数据库并设置值

看起来很简单，但是运行遇到了 onupgradeneeded 的问题，即使在手动删除 DB 之后也不会被调用

这是代码

  <script type="text/javascript">

    var id = GetItem();     

    if(id == null || id=="")
    {
        //based on some other logic 
        var GID = "test";

        SetItem(GID);
    }

    function GetItem() {

        var result = "";

        try {
               var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

                // Open  the database
                var open = indexedDB.open("DB", 1);

                open.onupgradeneeded = function () {
                    var db = open.result;
                    var store = db.createObjectStore("Store", { keyPath: "id" });                      
                };

                open.onsuccess = function () {
                    // Start a new transaction
                    var db = open.result;
                    var transaction = db.transaction("Store", "readwrite");
                    var store = transaction.objectStore("Store");

                     var gid = store.get("GID");
                     result = kid.result.value;

                };

                transaction.oncomplete = function () {
                    db.close();
                };                 
            }
            catch (err) {
                console.error(err.message);
            }          
        return result;
    }

    function SetItem(GID) {
        var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
        // Open (or create) the database
        var open = indexedDB.open("DB", 1);
        var transaction = db.transaction(["Store"]);
        var objectStore = transaction.objectStore("Store");
        objectStore.put({ id: "GID", value: GID });
        objectStore.onerror = function (event) {
            console.error(err.message);
        };
        request.onsuccess = function (event) {
            // Do something with the request.result!
            alert(request.result.value);
        };
           transaction.oncomplete = function () {
                    db.close();
                }; 
    }


</script>

本地存储不是一个选项

Answer 1

存在一些小问题，但如果您全神贯注解决这些问题，您的代码就可以正常工作。先来看看SetItem：

var open = indexedDB.open("DB", 1);

这是一个异步调用 - 因此在对打开的数据库执行某些操作之前，您必须将 onsuccess 和 onerror 附加到其中。稍后您将 open 引用为 db，但事件如果它是正确的，它仍然会抛出错误，因为 open 不引用您的数据库。这是我修复它的方法：

var open = indexedDB.open("DB", 1);
open.onerror = function(event) {
  console.log("Error loading database");
}
open.onsuccess = function(event) {
  var db = open.result;
  var transaction = db.transaction("Store", "readwrite");
  var objectStore = transaction.objectStore("Store");
  objectStore.put({ id: "GID", value: GID });
  /* ....... */
}

如您所见，我还将“readwrite”传递给了 db.transaction。当你想把一个对象放入你的数据库时，你必须这样做。还有一些其他小问题 - kid 而不是 gid。我通过进入 Chrome Dev Tools 控制台 (ctrl+shift+i) 并读取错误来修复其中的大部分 - 你也可以打开 (Application -> IndexedDB) 并在运行代码之前删除它以确保到底发生了什么。请记住，每次进行异步调用并希望读取响应时，都需要在完成时读取它。您的代码中的另一个示例：

var gid = store.get("GID"); // here you make asynchronous call
result = kid.result.value;  // here you're trying to get result immediately

它应该是这样的：

var gid = store.get("GID");
gid.onsuccess = function(event) { /* ... */ }

IDB 的 API 既不简单也不直观 - 我不能推荐你 idb enough. This library lets you do IDB, but with promises。

在 Indexeddb 中获取和设置一个值

Get and set a value in Indexeddb

javascript

indexeddb