javascript - 在客户端存储对象并在新选项卡中使用

Question

我当前正在处理一个页面，我将在客户端存储一个对象

并在其他选项卡中使用它。(键/值本地存储无法处理它)

例如，本地存储、 session 存储等都是键/值存储

并且不支持对象。

我的对象由许多对象、函数......

对象是:

Answer 1

函数对象不可序列化或结构化克隆。为了从一个选项卡传递到另一个选项卡，对象必须可序列化和反序列化。本质上，这意味着对象的属性必须能够转换为可传输格式并返回到对象。

有一些简单的方法可以解决您的问题。这是一个。在可序列化对象中捕获不可序列化对象的所有重要属性。然后传递可序列化对象。然后反序列化。

// file.js (include this on both tabs)
function MyObject() {
  this.foo;
  this.bar;
}
MyObject.prototype.asdf = function(){};

假设上面是您想要从一个选项卡传输到另一个选项卡的对象，但不能，因为它是一个函数对象。首先，创建一些辅助函数。

 // Create and return a serialized state
 MyObject.prototype.serialize = function() {
   // Create a simple object of only important state properties
   var simpleObject = {};
   simpleObject.foo = this.foo;
   simpleObject.bar = this.bar;
   return simpleObject;
 };

 // Assign property values to this object from simple object
 MyObject.prototype.deserialize = function(simpleObject) {
   this.foo = simpleObject.foo;
   this.bar = simpleObject.bar;
 };

现在，在发送消息时使用这些助手。我将在这里使用一些伪代码。

 // Send the object from one tab to others
 function sendMessageHelper() {
   // We don't actually send the object, we send its serial form
   var myObject = new MyObject();
   var transferable = myObject.serialize();
   window.postMessage(transferable);
 }

 // Get the object from the message
 function onMessageHandler(message) {
   var data = message.data;

   // Recreate the state of the object by deserializing
   var myObject = new MyObject();
   myObject.deserialize(data);
 }

最后，确保在两个页面(两个选项卡)中都包含定义对象的 js 文件。