Store an Object in client-side and use in new tabs

Question

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:

Answer 1

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

Answer 2

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