从 localStorage 解析 ES6 Class 对象不包含 Class 函数

Question

我想在 HTML5 localStorage 中保留一个 class 对象。 class 包含我也需要保留的方法，但解析 localStorage 对象表明该对象不相同。

class ExcitingMath {

    constructor(firstNumber, secondNumber) {

        this._firstNumber = firstNumber;
        this._secondNumber = secondNumber;
    }

    add() {

        return this._firstNumber + this._secondNumber;
    }

    subtract() {

        return this._firstNumber - this._secondNumber;
    }
}

const eMath = new ExcitingMath(2, 4);

在控制台中记录 eMath 显示 class 对象及其属性和方法：

但是，当我localStorage.setItem("math", JSON.stringify(eMath));和JSON.parse(localStorage.getItem("math"));对象往返localStorage时，它不再包含构造函数或方法。

如何使用 localStorage 保留原始 class 实例？

Answer 1

这是不可能的，因为 JSON.toString 只保存对象的状态，而不是您已经发现的对象的功能。我遇到了同样的 "problem" 并在我的类中编写了一个函数 "fromJSON" ，它从本地存储中获取 JSON 并将其转换为一个对象，如下所示：

class ExcitingMath {

    constructor(firstNumber, secondNumber) {

        this._firstNumber = firstNumber;
        this._secondNumber = secondNumber;
    }

    add() {

        return this._firstNumber + this._secondNumber;
    }

    subtract() {

        return this._firstNumber - this._secondNumber;
    }

    static fromJSON(serializedJson) {
        return Object.assign(new ExcitingMath(), JSON.parse(serializedJson))
    }
}

然后您可以按如下方式使用它：

const eMath = ExcitingMath.fromJSON(JSON.parse(localStorage.getItem("math")))

从 localStorage 解析 ES6 Class 对象不包含 Class 函数

Parsing ES6 Class Objects From localStorage Doesn't Include Class Functions

javascript

class

local-storage

persistence