无法在 'IDBObjectStore' 上执行 'add'

Question

我正在尝试将 javascript 对象（函数构造函数）添加到 IndexedDB，但出现错误

Failed to execute 'add' on 'IDBObjectStore': function () { this.mapHierachyString = this.mapHierachyString.replace(/>/g, "|"); //CHUSJ|Bloc 5|B...... } could not be cloned.

下面的代码有没有错误:

      $.ajax({
          url: '/Review/GetDynamicPositions',
          type: 'POST',
          data: {
              ProfileId: profileId,
              DateDebut: dateDebut,
              DateFin: dateFin
          },
          
          success: function (reponse) {

              if (reponse.indexOf("Erreur") < 0) 
              {
                  review = new Review(profileId);
                  const dynamicPositions = JSON.parse(reponse);
                  dynamicPositions.forEach(dynamic => {
                      const dynamicPosition = new DynamicPosition();
                      dynamicPosition.positionX = dynamic.PositionX;
                      dynamicPosition.positionY = dynamic.PositionY;
                      dynamicPosition.floorId = dynamic.FloorId;
                      dynamicPosition.zoneId = dynamic.ZoneId;
                      dynamicPosition.mapHierachyString = dynamic.MapHierchString;

                      dynamicPosition.changeMapString();
                      review.addDynamicPosition(dynamicPosition);
                  });

                  //..Sauvegarder le review dans la BD
                  sauvegarderReview(review);
              }

          }

      });



function sauvegarderReview(review) 
{
        const transcation = db.transaction('ReviewStore', 'readwrite');
        const store = transcation.objectStore('ReviewStore');

        //..Ajouter dans la BD
        const request = store.add(review);

        request.onsuccess = function (e) 
        {
            console.log('Sauvegarder avec success');
        };

        request.onerror = function (e) {
            console.log("Error", e.target.error.name);

        };
}

//Review object 
function Review(profileId)
{
        this.profileId = profileId;
        this.dynamicPositions = [];

        this.addDynamicPosition = function (dynamicPosition) 
        {
            this.dynamicPositions.push(dynamicPosition);
        }

}

//DynamicPosition object 
function DynamicPosition() 
{
      this.positionX = 0;
      this.positionY = 0;
      this.mapHierachyString = ''; //CHUSJ>Bloc 5>B
      this.floorId = 0;
      this.zoneId = '';

      this.changeMapString = function () {
          this.mapHierachyString = this.mapHierachyString.replace(/>/g, "|"); 
          this.mapHierachyString = this.mapHierachyString.replace(/ /g, "_");
      }


}

Answer 1

The spec says:

Each record is associated with a value. User agents must support any serializable object. This includes simple types such as String primitive values and Date objects as well as Object and Array instances, File objects, Blob objects, ImageData objects, and so on.

基本上这意味着您存储到 IndexedDB 的对象只能包含所有可能变量的有限子集。函数是不能存储在 IndexedDB 中的东西之一。根据您发布的错误消息，您的 review 对象中必须有一个函数。

如果您想将 review 中的数据存储在 IndexedDB 中，则必须以某种方式对其进行转换，使其不包含函数或任何其他有问题的数据类型。

Answer 2

您必须首先（仅）在您的数据中序列化您的 JS 函数，然后将它们作为序列化数据添加到 IndexedDB：

function serialize(value) {
    if (typeof value === 'function') {
        return value.toString();
    }
    if (typeof value === 'object') {
        var serializeObject = {};
        for (const [objectKey, objectValue] of Object.entries(value)) {
            console.log(`objectKey=${objectKey}  value=${objectValue}`);
            serializeObject[objectKey] = serialize(objectValue);
        }
        return serializeObject;
    }
        
    return value;
}

然后反序列化：

function deserialize(valueNew) {
    if (valueNew.toLowerCase().startsWith( 'function(' ) ) {
        return Function('"use strict";return ' + valueNew);
    }
    if (typeof valueNew === 'object') {
        var deserializeObject = {};
        for (const [objectKey, objectValue] of Object.entries(valueNew)) {
            console.log(`objectKey=${objectKey}  value=${objectValue}`);
            deserializeObject[objectKey] = deserialize(objectValue);
        }
        return deserializeObject;
    }
        
    return value;
}

在您的 IndexedDB 代码中，它将是这样的：

function addItem(name, item) {
    var itemObject = { name: name };

    itemObject.item = serialize(item);

    var transaction = db.transaction(['store'], 'readwrite');
    var store = transaction.objectStore('store');
    var request = store.add(itemObject);

    request.onerror = function(e) {
        console.log('Error', e.target.error.name);
    };
      
    request.onsuccess = function(e) {
        console.log('Woot! added it');
    };
      
    transaction.oncomplete = function(e) {
        console.log('Woot! trans oncomplete');
    }; 
}

然后，获取您的密钥的 keyData：

deserialize(keyData);

无法在 'IDBObjectStore' 上执行 'add'

Failed to execute 'add' on 'IDBObjectStore'

javascript

indexeddb