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
– Treast, Commented Jan 9, 2019 at 5:52

Stephan T. · Accepted Answer · 2019-01-09 06:26:20Z

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 9, 2019 at 6:26

answered Jan 9, 2019 at 5:55

Stephan T.

6,1243 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Grijan Over a year ago

I did that and this is the error that i got for it : Uncaught TypeError: Converting circular structure to JSON

Stephan T. Over a year ago

You have to either override the get and set functions or you have to follow the mentioned thread, passing functions is forbidden normally

Grijan Over a year ago

so it is not possible for me to send an object which has functions in it to another html page using js?

Stephan T. Over a year ago

It is possible, in my comment I wrote two viable solutions :)

jconder · Accepted Answer · 2019-01-09 06:00:15Z

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.

Abdallah · Accepted Answer · 2019-01-09 06:55:47Z

0

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!

answered Jan 9, 2019 at 6:55

Abdallah

471 gold badge2 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to send an Object which has functions in it

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related