IndexedDB 错误：未捕获的 DataCloneError：无法在“IDBObjectStore”上执行“放置”：无法克隆对象

Question

我正在使用 Google 地图 API 和 HTML 5 地理定位 API 将我的位置显示为地图上的标记。显示此标记后，我有一个简单的标记双击功能，可使用 indexedDB 将新标记保存到我的当前位置。一切顺利，直到对象即将被存储，然后我在控制台中收到消息“Uncaught DataCloneError: Failed to execute 'put' on 'IDBObjectStore': An object could not be clone.” .我的代码如下：

        function initialize() {
          var mapProperties = { // Set the maps properties
            center:new google.maps.LatLng(55.8580,-4.2590),
            zoom:8,
            mapTypeId:google.maps.MapTypeId.ROADMAP
          };    

          var map=new google.maps.Map(document.getElementById("map-overview"),mapProperties);   //Display the map in the map-overview div








          function NogeoLocation(e) {   //A function to handle users that do not have Geolocation
          if (e) {
            var content = 'Error: Unfortunately the Geolocation service failed.';
          } else {
            var content = 'Error: Sorry, Your web browser doesn\'t support geolocation.';
          }

            var options = { //Error options
            map: map,
            position: new google.maps.LatLng(60, 105), //Set new position on Error
            content: content    //Display error message
          };

          var infowindow = new google.maps.InfoWindow(options); 
          map.setCenter(options.position);


         }  


           //Using HTML5 Geolocation
          if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var position = new google.maps.LatLng(position.coords.latitude,
                                               position.coords.longitude);







            var contentString = "Here is your current location!" + "<button onclick='myBtn()'>Save</button>"

             var infowindow = new google.maps.InfoWindow({
              content: contentString
          });


          var marker = new google.maps.Marker({
              position: position,
              map: map,
              title: 'My House'
          });




            google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
          });

        var db;

        function indexedDBOk() {
            return "indexedDB" in window;
        }

        google.maps.event.addListener(marker, 'dblclick', function() {

        alert("dbl Click");

        console.log(position);



            if(!indexedDBOk) return;

            var openRequest = indexedDB.open("idarticle_people",1);

            openRequest.onupgradeneeded = function(e) {
                var thisDB = e.target.result;

                if(!thisDB.objectStoreNames.contains("people")) {
                    thisDB.createObjectStore("people");
                }
            }

            openRequest.onsuccess = function(e) {
                console.log("running onsuccess");

                db = e.target.result;




            var transaction = db.transaction(["people"],"readwrite");
            var store = transaction.objectStore("people");

            //Define a marker
             var marker = {
             position: position,
             map: map,
            title: 'New Marker'
         }
         console.log(marker);
         console.log("about to perform add");
            //Perform the add
            var request = store.put(marker,1);

            console.log("added");

            request.onerror = function(e) {
                console.log("Error",e.target.error.name);
                //some type of error handler
            }

            request.onsuccess = function(e) {
                console.log("Woot! Did it");
            }



            }

            openRequest.onerror = function(e) {
                //Do something for the error
            }





        });













              map.setCenter(position);
            }, function() {
              NogeoLocation(true); // Refers to NogeoLocation function
            });
          } else {
            // If the user's browser doesn't support Geolocation
            NogeoLocation(false);
          } //End of HTML5 GeoLocation










          } // End of the function that initializes Google Maps


        google.maps.event.addDomListener(window, 'load', initialize);   //On page load, execute initialize()

Answer 1

marker 无法克隆，因为存储在map-属性中的对象包含对无法克隆的 DOMNode(#map-overview) 的引用（参见：Things that don't work with structured clones）。

删除map-property，因为google.maps.Map-instance 在您稍后检索标记时将不存在，所以它根本无法重复使用。

Answer 2

我发现错误的原因是尝试将无法识别的对象添加到缓存中。

this.storage.set("page", HomePage);

我切换到一个字符串，它工作了

this.storage.set("page", "HomePage");