json.stringify不处理对象方法

Question

我正在尝试开发一个脱机HTML5应用程序，该应用程序应可在大多数现代浏览器（Chrome，Firefox，IE 9
+，Safari，Opera）中使用。由于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

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

Answer 1

javascript中的函数不仅仅是其代码。他们也有范围。代码可以字符串化，但作用域不能。

JSON.stringify()将对JSON支持的值进行编码。值可以是对象，数组，字符串，数字和布尔值的对象。其他任何事情都将被忽略或引发错误。JSON不支持函数。JSON仅处理纯数据，功能不是数据，而是具有更复杂语义的行为。

也就是说，您可以更改JSON.stringify()工作方式。第二个参数是一个replacer函数。因此，您可以通过强制功能分层来强制实现所需的行为：

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 不支持functions 。

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。我们只需要将数据馈送到提供该方法的构造函数中即可。