1

I'm currently working on a page and I'm going to store an object in client-side

and using it in other tabs.(the key/value local storages can't handle it)

For example, the Local Storage, Session Storage and etc are key/value storages

and doesn't support objects.

My object consists of many objects, functions,...

The object is:

enter image description here

Iman Bahrampour
  • 6,180
  • 2
  • 41
  • 64
  • 1
    1> pass it through `postMessage` in the new window 2> directly set the objecy from parent window into newWindow reference (need a parent child relation, will not work in completely new tab opened by user) – Koushik Chatterjee Dec 26 '17 at 13:00
  • @Koushik Chatterjee. At present, I'm working with the AcrossTabs module and it broadcast messages with postMessage. the parent child relation maybe doesn't set however I need something like public storage. – Iman Bahrampour Dec 26 '17 at 13:11
  • then, try stringifying your functions as well, and then store that – Koushik Chatterjee Dec 26 '17 at 13:13
  • @Koushik Chatterjee. the problem is that the __proto__ has many sub-objects and I can't stringify them. – Iman Bahrampour Dec 26 '17 at 13:39
  • https://stackoverflow.com/questions/3685703/javascript-stringify-object-including-members-of-type-function this might help – Koushik Chatterjee Dec 26 '17 at 13:50

2 Answers2

0

Function objects are not serializable or structured-cloneable. In order to be passed from one tab to another, an object must be serializable and deserializable. Essentially this means the object's properties must be able to be converted into a transferrable format and back out into an object.

There are simple ways to work around your problem. Here is one. Capture all of the important properties of your non-serializable object in a serializable object. Then pass the serializable object. Then deserialize.

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

Let's suppose above is your object you want to transfer from one tab to another, but cannot, because it is a function object. First, create some helper functions.

 // 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;
 };

Now, use these helpers when sending messages. I am going to use some pseudocode here.

 // 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);
 }

Finally, make sure to include the js file that defines the object in both pages (both tabs).

Josh
  • 17,834
  • 7
  • 50
  • 68
  • This answer is helpful but as I mentioned in my question comments, the relationship between parent and child windows aren't certain. If the relation is certain then we can send the object with postMessage and don't need to serialization. excuse me, this comment is too late. – Iman Bahrampour Jan 02 '18 at 11:40
0

you can store function in a JSON object. please follow this.

Set cookie on a Page

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);

Get cookie on Another page

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

 //Call that function 
customFunction();

Hope this will help you

Negi Rox
  • 3,828
  • 1
  • 11
  • 18