L'analyse des objets de classe ES6 à partir de localStorage n'inclut pas les fonctions de classe

Question

Je souhaite conserver un objet de classe dans HTML5 localStorage. La classe contient des méthodes dont j'ai également besoin pour persister, mais l'analyse de l'objet localStorage révèle que l'objet n'est pas le même.

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

Connexion eMath dans la console affiche l'objet de classe avec ses propriétés et méthodes: l'objet et de localStorage, il ne

Cependant, quand je localStorage.setItem("math", JSON.stringify(eMath)); et JSON.parse(localStorage.getItem("math")); comprend plus la constructeur ou méthodes.

Comment puis-je conserver l'instance de classe d'origine avec localStorage?

Answer 1

Cela n'est pas possible car JSON.toString enregistre simplement l'état de l'objet, mais pas les fonctions de l'objet comme vous l'avez déjà découvert. Je face à la même « problème » et écrit une fonction « fromJSON » dans mes classes qui prend la JSON de localStorage et la transforme en un objet comme suit:

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

Vous pouvez alors l'utiliser comme suit:

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