JS 解决 'Failed to execute 'put' on 'IDBObjectStore'...' 问题

错误信息

Failed to execute ‘put’ on ‘IDBObjectStore’: An object could not be cloned

原因

因为我的数据中有 Promise 对象，所以无法被 IndexedDB 存储，所以会报错。

看一下文档，在 IndexedDB 中，只能存储 DOMString、ArrayBuffer、ArrayBufferView、Blob、IDBKeyRange、Date、Number、Boolean、null、undefined。

了解一下 IndexedDB 使用

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB

了解一下 structuredClone 结构化克隆算法和不适用于结构化克隆的东西

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

结构化克隆算法复制复杂的 JavaScript 对象。它在内部调用时使用，通过在 WorkersstructuredClone() 之间传输数据，使用 IndexedDB 存储对象，或为其他 API 复制对象，如 postMessage() 它通过递归输入对象进行克隆，同时维护先前访问过的引用的映射，以避免无限遍历循环。

了解一下 Serialization 什么是序列化

将对象或数据结构转换为适合通过网络或存储（例如，数组缓冲区或文件格式）传输的格式的过程。

https://developer.mozilla.org/en-US/docs/Glossary/Serialization

检查对象是否在 JavaScript 中可序列化的可靠方法

可以参考下面的文章

https://stackoverflow.com/questions/30579940/reliable-way-to-check-if-objects-is-serializable-in-javascript

var _ = require('lodash');

exports.isSerializable = function(obj) {
  if (_.isUndefined(obj) ||
      _.isNull(obj) ||
      _.isBoolean(obj) ||
      _.isNumber(obj) ||
      _.isString(obj)) {
    return true;
  }

  if (!_.isPlainObject(obj) &&
      !_.isArray(obj)) {
    return false;
  }

  for (var key in obj) {
    if (!exports.isSerializable(obj[key])) {
      return false;
    }
  }

  return true;
};

最佳解决方式 realistic-structured-clone 库

这个单纯的用 lodash 的 cloneDeep方法是不行的，因为cloneDeep 是拷贝后，还是会有一些数据不符合要求。

这个库挺有意思的，可以判断出 Blob ArrayBuffer 等数据类型，然后进行深拷贝，要知道 IndexedDB 是可以存这些的，如果这些不存怪可惜的。

// First load the module
// (Use Browserify or something if you're targeting the web)
var structuredClone = require('realistic-structured-clone');

// Clone a variable (will throw a DataCloneError for invalid input)
var clonedX = structuredClone(x);

下面是源码，用 typeson-registry 工具库里的方法拿到 structured-cloning-throwing，好东西啊，赶紧 Fork 一下。

var DOMException = require('domexception');
var Typeson = require('typeson');
var structuredCloningThrowing = require('typeson-registry/dist/presets/structured-cloning-throwing');

// http://stackoverflow.com/a/33268326/786644 - works in browser, worker, and Node.js
var globalVar = typeof window !== 'undefined' ? window :
   typeof WorkerGlobalScope !== 'undefined' ? self :
   typeof global !== 'undefined' ? global :
   Function('return this;')();

if (!globalVar.DOMException) {
    globalVar.DOMException = DOMException;
}

var TSON = new Typeson().register(structuredCloningThrowing);

function realisticStructuredClone(obj) {
    return TSON.revive(TSON.encapsulate(obj));
}

module.exports = realisticStructuredClone;

作者还提及了可以用替代方案 possMessage 传递数据，但是会让数据序列化，导致一部分数据丢失。

function clone(x) {
    return new Promise(function (resolve, reject) {
        window.addEventListener('message', function(e) {
            resolve(e.data);
        });
        window.postMessage(x, "*");
    });
}
var x = {a:[1,2,3], b:{c:1}};
clone(x).then(function(cloned) {
    console.log("x: %s", JSON.stringify(x));
    console.log("cloned: %s", JSON.stringify(cloned));
    console.log("x == cloned %s", x == cloned);
    console.log("x === cloned %s", x === cloned);
});

其他解决方式

@ungap/structured-clone 库

可以考虑用 @ungap/structured-clone 库解决问题，但是这样就不能传图片数据，还有一些 ArrayBuffer、Blob 也不能传递，怪可惜的


```js
// as default export
import structuredClone from '@ungap/structured-clone';
const cloned = structuredClone({any: 'serializable'});

// as independent serializer/deserializer
import {serialize, deserialize} from '@ungap/structured-clone';

// the result can be stringified as JSON without issues
// even if there is recursive data, bigint values,
// typed arrays, and so on
const serialized = serialize({any: 'serializable'});

// the result will be a replica of the original object
const deserialized = deserialize(serialized);

https://github.com/yahoo/serialize-javascript 库

var serialize = require('serialize-javascript');

serialize({
    str  : 'string',
    num  : 0,
    obj  : {foo: 'foo'},
    arr  : [1, 2, 3],
    bool : true,
    nil  : null,
    undef: undefined,
    inf  : Infinity,
    date : new Date("Thu, 28 Apr 2016 22:02:17 GMT"),
    map  : new Map([['hello', 'world']]),
    set  : new Set([123, 456]),
    fn   : function echo(arg) { return arg; },
    re   : /([^\s]+)/g,
    big  : BigInt(10),
});