Обход потерянных метаданных при сохранении объектов в localStorage

Question

Проблема

У меня есть веб-страница, на которую я загружаю данные (файл csv), эти данные анализируются, и каждая строка подается через функцию конструктора объекта в объекты продукта, которые заполняются.массив.

Итак, после загрузки файла у меня есть массив пользовательских объектов.Существует несколько методов, которые я вызываю для этих объектов, и они прекрасно работают и отлично, и все.

Естественно, когда я закрываю браузер, я теряю эту информацию, поэтому я хотел сохранить эти объекты в localStorage, чтобы яне всегда нужно загружать файл, с которым я работаю.

Но проблема в том, что когда я сохраняю файлы в localStorage, данные прекрасно сохраняются, но метаданные объектов теряются.

Так что, если я закрою браузер и снова открою его, содержимое будет извлечено из localStorage, но мой массив с данными теперь является массивом с кучей анонимных объектов (со всеми нужными данными, обратите внимание).

Так что проблема для меня в том, что мои методы больше не работают.

Краткий пример

/* defining an object constructor and method */
function ball(x, y) {
 this.x = x;
 this.y = y;
}
ball.prototype.display = function() {
 console.log('x: ' + this.x + ', y: ' + this.y);
}

/* creating an array and populating with ball objects */
var ballArr = [];
for (var i = 0; i < 5; i++) {
 var min = 10;
 var range = 30;
 var x = Math.floor(Math.random()*range+min);
 var y = Math.floor(Math.random()*range+min);
 ballArr.push(new ball(x, y));
}

/* calling the display method on the ball objects of the ballArr array */
for (var i = 0; i < ballArr.length; i++) {
 ballArr[i].display();
}

/* saving the array to localStorage and clearing the initial array (to mimic closing the browser)*/
localStorage.ballArr = JSON.stringify(ballArr);
ballArr = [];

/*setting ballArr to the contents of its localStorage equivalent
  notice that the content of the objects are the same, but now they have no names */
ballArr = JSON.parse(localStorage.ballArr);
console.log(ballArr);

/* this bit here will cause an error: ballArr[i].display is not a function */
for (var i = 0; i < ballArr.length; i++) {
 ballArr[i].display();
}

Вопрос

Моя цель состоит в том, чтобы сначала выполнить поиск по локальной странице localStorage, чтобы проверить, сохранены ли данные, если нет, массив пуст.

Массив можно заполнить, загрузив файл CSV.,Это действие также заменяет объект localStorage.

Есть ли способ сделать это, когда, если данные не загружены, но localStorage содержит данные, мои методы все равно можно вызывать для объектов, извлеченных из localStorage?

Answer 1

Хотя можно также сериализовать и сохранить определения функций в localStorage, это не идеальный или рекомендуемый способ сделать это.Вместо этого после извлечения данных из localStorage вы должны заново создать объекты, используя данные, как если бы они создавались в первый раз, но с использованием только что загруженных значений.

Answer 2

Похоже, проблема в том, как вы сохраняете и извлекаете данные из локального хранилища.Попробуйте вместо этого:

localStorage.setItem('ballArr', JSON.stringify(ballArr));

if (localStorage.getItem('ballArr') !== null){
    ballArr = JSON.parse(localStorage.getItem('ballArr').toString());
console.log(ballArr);
}

Обработайте случай, если данные не находятся в локальном хранилище, и если это так, получите данные toString, а затем проанализируйте их в JSON.