Question

在我的应用程序内部创建了一个复杂的对象（许多不同类型的属性，数组，函数，字符串等），它的创建是唯一存在于不能使用的部分之间的东西。离线应用。我的想法是将它缓存在localStorage中，然后在离线模式下恢复它。

我尝试了明显的候选人JSON.stringify（）和.toString（），但都没有产生所需的序列化。也许我的整个方法都存在缺陷。

任何想法如何做到这一点？

Answer 1

你不能序列化函数，你最好创建一个可以序列化和反序列化的类。这是一个例子：

class Example {
   constructor(data) {
      this.data = data;
   }
   setKey(key, value) {
      this.data[key] = value;
      return this;
   }
   getKey(key) {
      return this.data[key];
   }
   serialize() {
      return JSON.stringify(this.data);
   }
}

const example = new Example({ foo: 'bar' });
example.setKey('fizz', 'buzz');
// save item in local storage
localStorage.setItem('example', example.serialize());
// see the stringified version
console.log('serialized', localStorage.getItem('example'));
// get the json out
const json = localStorage.getItem('example');
// create an instance of Example using the parsed json
const example2 = new Example(JSON.parse(json));
// use rehydrated instance
console.log(example2.getKey('fizz'));

旁注如果您不想定义serialize()方法：如果您在班级中添加toJSON()方法，则可以指定要序列化的内容：

toJSON() {
   return this.data;
}

当您致电JSON.stringify(exampleInstance)时，它会触发toJSON()方法，并且只会序列化toJSON()返回的内容。

如果您希望在从localStorage获取数据后跳过JSON.parse步骤，则可以提供一个静态方法，为您提供一个填充的实例：

class Example {
   // insert rest of the class above here
   static fromLocalStorage(json) {
       return new this(JSON.parse(json));
   }
}

// same code as before
const json = localStorage.getItem('example');
const example2 = Example.fromLocalStorage(json);

序列化JS对象以供脱机使用

1 个答案: