How to send an Object which has functions in it

Question

I'm trying to send an object from one html page to another in js. The Object that i'm trying to send is generated by peer.js mentioned in the below code
The key value pair in the object looks different from normal objects

below is the sample code
Firstpage.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.16/peer.min.js"></script>
<button onclick="myfunction()">Click me</button>
<script>
function myfunction(){
    var peer = new Peer("id", {host: '192.168.1.14', port: 9002}); //peer is object that i'm trying to pass which will  be //created while declaring the object
    localStorage.setItem("sendingObject", peer); // i have tried here setItem to send it to the other page
    url = 'someURl/secondPage.html?name='+ encodeURIComponent(peer);
    document.location.href = url;
}
</script>

console.log(peer) is displayed below

{options: {…}, destroyed: false, disconnected: false, open: false, connections: {…}, …}

secondPage.html

<script>
window.onload = function () {
    var url = document.location.href,
    params = url.split('?')[1].split('&'),
    data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
    tmp = params[i].split('=');
    data[tmp[0]] = tmp[1];
    }

    name=data.name;
    console.log(name);

    var localObj = (localStorage.getItem("sendingObject")); // here retrieving from the setItem
    console.log(localObj);
}
</script>

For console.log(name) ----> it is printing %5Bobject%20Object%5D
For console.log(localObj) ----> it is printing [object Object]

You cannot store functions on LocalStorage. LocalStorage basically stringify the `Object` and then store it. — Treast, Jan 09 '19 at 05:52

Stephan T. · Answer 1 · 2019-01-09T06:26:20.883

2

Local storage only supports string datatype. So you have to convert it to String before saving to LocalStorage:

localStorage.setItem('sendingObject', JSON.stringify(peer));

Convert back to JS object, reading from LocalStorage

peer = JSON.parse(localStorage.getItem('sendingObject');

See this thread on how to store functions in localStorage

See this thread on how to overrride the json stringify/parse function to pass functions in localStorage

edited Jan 09 '19 at 06:26

answered Jan 09 '19 at 05:55

Stephan T.

5,843
3
20
42

I did that and this is the error that i got for it : Uncaught TypeError: Converting circular structure to JSON – Grijan Jan 09 '19 at 06:00
You have to either override the get and set functions or you have to follow the mentioned thread, passing functions is forbidden normally – Stephan T. Jan 09 '19 at 06:02
so it is not possible for me to send an object which has functions in it to another html page using js? – Grijan Jan 09 '19 at 06:10
It is possible, in my comment I wrote two viable solutions :) – Stephan T. Jan 09 '19 at 06:25

score 1 · Answer 2 · answered Jan 09 '19 at 06:00

When you store something in localStorage it is implicitly converted to a string, and if you run console.log(peer.toString()) in the first page you will see the output [object Object].

From what I can see you would be better off storing the values needed to recreate the peer object on the second page, e.g.

localStorage.setItem('peerId', 'id');
localStorage.setItem('peerHost', '192.168.1.14');
localStorage.setItem('peerPort', '9002');

And then on the second page:

const peerId = localStorage.getItem('peerId');
...
const peer = new Peer(peerId, ...);

You could also serialize the data using JSON.stringify() and JSON.parse() which allows you to serialize objects to and from strings in a standard, well supported fashion, e.g.

// On the first page
localStorage.setItem('peer', JSON.stringify(peer));

// On the second page
const peerData = localStorage.getItem('peer');
const peer = JSON.parse(peerData);

However, there are some gotchas that might bite you when serializing objects with functions/complex data across Window origins, so unless you know the objects were carefully written with cross origin use in mind, I'd suggest serializing the data required to reconstruct a new object in the second window.

score 0 · Answer 3 · answered Jan 09 '19 at 06:55

I found this previously asked question which was answered in detail, providing a few different approaches to send variables/objects between "pages" using:

JSON.stringify() to turn the object into a JSON string, and
Base64 encoding/decoding

Hope that helps. Happy coding!

How to send an Object which has functions in it

3 Answers3