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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在客户端存储对象并在新选项卡中使用相关的知识,希望对你有一定的参考价值。

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

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

例如,本地存储,会话存储等是键/值存储

并且不支持对象。

我的对象包含许多对象,函数,......

对象是:

enter image description here

答案

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

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

// 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文件。

另一答案

您可以将函数存储在JSON对象中。请关注此。

在页面上设置cookie

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
    }
}
return "";
}
 var JSONOBJ={};
 var yourfunction=function(){ console.log("hi i am function") }
 JSONOBJ["customFunction"]="var customFunction="+yourfunction;
 setCookie("CookieWithfunction",JSON.stringify(JSONOBJ),5);

在另一页上获取cookie

var MyJSONOBJ=JSON.parse(getCookie("Myobj"))
eval(MyJSONOBJ.customFunction);

 //Call that function 
customFunction();

希望对你有帮助

以上是关于在客户端存储对象并在新选项卡中使用的主要内容,如果未能解决你的问题,请参考以下文章

Angular 2 - 重定向到外部 URL 并在新选项卡中打开

Jquery自定义右键单击并在新选项卡中打开

jQuery:检测鼠标单击并在新选项卡中打开目标

在表单字段中输入文本,在提交时生成多个 URL 并在新选项卡中打开链接

.NEW MVC 在传递参数并在新选项卡中打开时忽略弹出窗口的大小

在新选项卡中打开 iframe 源