Question

我正在尝试将对象从一个html页面发送到js中的另一个页面。我要发送的对象是由以下代码中提到的peer.js生成的
对象中的键值对看起来与普通对象不同

下面是示例代码
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）显示在下面

{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>

对于console.log（name）---->，它正在打印%5Bobject%20Object%5D
对于console.log（localObj）---->，它正在打印[object Object]

Answer 1

本地存储仅支持字符串数据类型。因此，在保存到LocalStorage之前必须将其转换为String：

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

转换回JS对象，从LocalStorage中读取

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

有关如何在localStorage中存储函数的信息，请参见此thread

有关如何重写json stringify / parse函数以在localStorage中传递函数的信息，请参见此thread

Answer 2

当您将内容存储在localStorage中时，它会隐式转换为字符串，如果在第一页中运行console.log(peer.toString())，您将看到输出[object Object]。

据我所知，最好在第二页上存储重新创建对等对象所需的值，例如

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

然后在第二页上：

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

您还可以使用JSON.stringify()和JSON.parse()来序列化数据，这允许您以标准的，受支持的方式在字符串之间串行化对象，例如

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

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

但是，在使用跨Window起源的函数/复杂数据序列化对象时，有些陷阱可能会咬住您，因此除非您知道这些对象是认真考虑跨起源使用而编写的，否则建议将所需的数据序列化为在第二个窗口中重建一个新对象。

Answer 3

我发现this previously asked question得到了详细解答，它提供了几种使用以下方法在“页面”之间发送变量/对象的方法：

JSON.stringify()将对象变成JSON字符串，和
Base64 encoding/decoding

希望有帮助。编码愉快！

如何发送具有功能的对象

3 个答案: