javascript - 在 JavaScript 中尝试使用 localStorage 保存和加载包含对象的数组时出错

Question

我目前正在开发一个游戏作为我初学者编程类(class)的“最终项目”。因此，核心部分是能够保存游戏数据。游戏中有4个阵，每个有9个位置，代表游戏中的元素栏。库存打印元素所在的库存槽中的元素图像。一个用于元素对象:

this.inventory = {1: num[1], 2: num[30], 3: num[33], 4: num[9], 5: "empty", 6: "empty", 7: "empty", 8: "empty", 9: "empty"};

每个项目(例如 num[1])都有一个 .image 属性和一个 .data 属性。 下一个数组用于定义该项目的数量:

this.inventoryStack = {1: 1, 2: 7, 3: 99, 4: 5500, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0};

然后有一个用于图像，然后是一个用于数据(数据存储在单独的数组中):

this.images = {1: num[1].image, 2: num[30].image, 3: num[33].image, 4: num[9].image, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0};

this.data = {1: rods[0], 2: num[30].data, 3: num[33].data, 4: num[9].data, 5: 0 , 6: 0, 7: 0, 8: 0, 9: 0};

The result of these these arrays will look like this in the game:

我正在使用如下所示的 localStorage 方法首先保存数据，然后通过单独的键盘按键恢复:

     this.save = function() {

            if(keyState[77]) {

            localStorage.setItem("inventorySave", JSON.stringify(this.inventory));
            localStorage.setItem("stackSave", JSON.stringify(this.inventoryStack));
            localStorage.setItem("imageSave", JSON.stringify(this.images));
            localStorage.setItem("dataSave", JSON.stringify(this.data));

        }
    }

    this.restore = function() {


            if(keyState[78] && this.restorer == true) {
            this.restorer = false;
            }
            if(this.restorer == false && this.restoreTick < 2) this.restoreTick++;
            if(this.restoreTick == 1) for(var i in this.inventoryStack) this.inventoryStack[i] = 0;
            if(this.restoreTick == 2) {
                this.parser1 = JSON.parse(localStorage.getItem("inventorySave")); 
                this.parser2 = JSON.parse(localStorage.getItem("stackSave"));
                this.parser3 = JSON.parse(localStorage.getItem("imageSave"));
                this.parser4 = JSON.parse(localStorage.getItem("dataSave"));
                for(var i in this.parser1) {
                    if(this.parser1[i] != "empty") {

                    this.inventory[i] = this.parser1[i];
                    this.inventoryStack[i] = this.parser2[i];
                    this.images[i] = this.parser3[i];
                    this.data[i] = this.parser4[i];  
                    }
                }
                    if(!keyState[78]) {
                    this.restoreTick = 0;
                    this.restorer = true;
                    }
            }

    }

但是，当我尝试保存然后恢复时，出现此错误: “未捕获的类型错误:无法在‘CanvasRenderingContext2D’上执行‘drawImage’:提供的值不是‘(CSSImageValue、HTMLImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap 或 OffscreenCanvas)’类型”

我想知道，这里可能是什么错误？这是我的第一个问题，对于任何错误的表述或描述，我们深表歉意!我看过关于这个话题的其他问题，但他们帮不了我:(

Answer 1

您不能将 HTMLImageElements 保存到 localStorage 中并期望返回 HTMLImageElement，我假设 this.images 对应。

相反，您只需要保存所需的数据，然后重新实例化图像元素。

假设 this.images 是图像元素的对象，您可以将它们复制到一个新对象以序列化以仅保存源列表，然后重新映射到新 HTMLImageElements 列表当你恢复。有几种方法可以迭代对象，但这是最古老和最兼容的方法:

this.save = function() {
  // Save a list of srcs from each Image element in this.images
  var imageSrcs = {};
  for (var key in this.images) {
    if (this.images.hasOwnProperty(key)) {
      imageSrcs[key] = this.images[key].src;
    }
  }
  localStorage.setItem("imageSrcsSave", JSON.stringify(imageSrcs));
}

this.restore = function() {
  // Restore the stored sources and instantiate NEW image elements
  // into this.images.
  var imageSrcs = JSON.parse(localStorage.getItem("imageSrcsSave"));
  this.images = {};
  for (var key in imageSrcs) {
    if (imageSrcs.hasOwnProperty(key)) {
      this.images[key] = new Image();
      this.images[key].src = imageSrcs[key];
    }
  }
}