How to store an array of objects in local storage and accessing the object's method after retrieval?

Question

My object class:

 class Dog {

        constructor(name) {

            var _name;

            _name = name;

            this.getName = function () {
                return _name;
            }
        }
    }

I have a button on click event wire to the following function:

            document.getElementById("btnTest").onclick = function () {

            var animals = [];

            var name = document.getElementById("name").value;
            var bday = document.getElementById("bday").value;
            var age = document.getElementById("age").value;
            var desc = document.getElementById("description").value;

            animals.push(new Dog(name, bday, age, desc));

            var serializedAnimals = JSON.stringify(animals);

            window.localStorage.setItem("list",serializedAnimals);

            var list = JSON.parse(window.localStorage.getItem("list"));

            console.log(list.getName());
        }

However when i trigger the function from the button click I get this error console message box:

TypeError: list.getName is not a function

What am I doing wrong?

Answer 1

Methods do not get serialised by JSON.stringify

class Dog {

      constructor(name) {

          var _name;

          _name = name;

          this.getName = function () {
              return _name;
          }
      }
  }

var animals = [];

animals.push(new Dog('name', 'bday', 'age', 'desc'));

var serializedAnimals = JSON.stringify(animals);

console.log(serializedAnimals);

console.log(JSON.stringify({ func: () => {} }));