javascript - json.stringify 不处理对象方法

Question

我正在尝试开发一个可以在大多数现代浏览器(Chrome、Firefox、IE 9+、Safari、Opera)中运行的离线 HTML5 应用程序。由于 Safari 尚不支持 IndexedDB，并且已弃用 WebSQL，因此我决定使用 localStorage 来存储用户生成的 JavaScript 对象，并使用 JSON.stringify()/JSON.parse() 来放入或取出对象。但是，我发现 JSON.stringify() 不处理方法。这是一个具有简单方法的示例对象:

    var myObject = {};
    myObject.foo = 'bar';
    myObject.someFunction = function () {/*code in this function*/}

如果我将此对象字符串化(然后将其放入 localStorage)，则将保留的只是 myObject.foo，而不是 myObject.someFunction()。

    //put object into localStorage
    localStorage.setItem('myObject',JSON.stringify(myObject));

    //pull it out of localStorage and set it to myObject
    myObject = localStorage.getItem('myObject');

    //undefined!
    myObject.someFunction

我确信你们中的许多人可能已经知道这个限制/功能/无论您想如何调用它。我想出的解决方法是使用方法(myObject = new objectConstructor())创建一个对象，从 localStorage 中提取对象属性，并将它们分配给我创建的新对象。我觉得这是一种迂回的方法，但我是 JavaScript 世界的新手，所以这就是我解决它的方法。所以这是我的大问题:我希望将整个对象(属性+方法)包含在 localStorage 中。我该怎么做呢？如果您可以向我展示一个更好的算法，或者另一个我不知道的 JSON 方法，我将不胜感激。

Answer 1

JavaScript 中的函数不仅仅是它们的代码。他们也有范围。代码可以字符串化，但范围不能。

JSON.stringify() 将编码 JSON 支持的值。其值可以是对象、数组、字符串、数字和 bool 值的对象。其他任何内容都将被忽略或引发错误。函数不是 JSON 中受支持的实体。 JSON只处理纯数据，函数不是数据，而是具有更复杂语义的行为。

<小时/>

也就是说，您可以更改 JSON.stringify() 的工作方式。第二个参数是一个替换函数。因此，您可以通过强制函数的字符串化来强制执行您想要的行为:

var obj = {
  foo: function() {
    return "I'm a function!";
  }
};

var json = JSON.stringify(obj, function(key, value) {
  if (typeof value === 'function') {
    return value.toString();
  } else {
    return value;
  }
});

console.log(json);
// {"foo":"function () { return \"I'm a function!\" }"}

但是当您读回该内容时，您必须评估函数字符串并将结果设置回对象，因为 JSON 不支持函数。

<小时/>

总而言之，JSON 中的编码函数可能会变得非常复杂。你确定你要这么做吗？可能有更好的方法...

也许您可以保存原始数据，并将其从页面上加载的 JS 传递给构造函数。 localStorage 仅保存数据，但加载到页面上的代码将提供操作该数据的方法。

// contrived example...

var MyClass = function(data) {
  this.firstName = data.firstName;
  this.lastName = data.lastName;
}

MyClass.prototype.getName() {
  return this.firstName + ' ' + this.lastName;
}

localStorage.peopleData = [{
  firstName: 'Bob',
  lastName:  'McDudeFace'
}];

var peopleData = localStorage.peopleData;

var bob = new MyClass(peopleData[0]);
bob.getName() // 'Bob McDudeFace'

我们不需要将 getName() 方法保存到 localStorage。我们只需将该数据提供给提供该方法的构造函数即可。