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.setItem('ballArr', JSON.stringify(ballArr));

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

处理数据不在本地存储中的情况，如果是，则将数据检索到toString，然后将其解析为JSON。

Answer 2

尽管也可以序列化功能定义并将其存储在localStorage中，但这不是理想的或推荐的方式。相反，从localStorage检索数据后，应该使用数据重新创建对象，就像第一次创建对象一样，但是使用刚加载的值。

将对象保存到localStorage时丢失元数据的解决方法

2 个答案: