localStorage의 ES6 클래스 객체를 구문 분석 할 때 클래스 함수가 ​​포함되지 않음

Question

HTML5 localStorage에서 클래스 객체를 유지하려고합니다. 클래스에는 또한 유지해야하는 메소드가 포함되어 있지만 localStorage 객체를 구문 분석하면 객체가 동일하지 않다는 것을 알 수 있습니다. 콘솔에서 eMath 로깅

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); 

은 그것으로 클래스 객체의 표시 속성과 메소드 :

그러나

, 나는 localStorage.setItem("math", JSON.stringify(eMath)); 및 JSON.parse(localStorage.getItem("math")); 및 localStorage에서 개체, 그것은 더 이상을 포함 생성자 또는 메소드.

어떻게 로컬 스토리지와 원래의 클래스 인스턴스를 지속 할 수 있습니까?

Answer 1

JSON.toString은 객체의 상태를 저장하지만 객체의 기능은 이미 저장했기 때문에 불가능합니다. 저도 같은 "문제"에 직면하고 로컬 스토리지에서 JSON을 취하고 대상으로 다음과 같은 것을 변환 내 수업에서 함수 "fromJSON"쓴 다음과 같이

이

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")))