无法检测到实际的页面重新加载

问题描述：

我在JavaScript中使用套接字来发送数据。以下是代码片段。无法检测到实际的页面重新加载

socket.on('my response', function(msg) { 
    $('#log').append('<p>Received: ' + msg.data + '</p>'); 
    /* 
    if (window.performance) { 
     console.info("window.performance work's fine on this browser"); 
    } 
    if (performance.navigation.type == 1) { 
     console.info("This page is reloaded"); 
    } else { 
     console.info("This page is not reloaded"); 
    } */ 
    document.getElementById('div_id').innerHTML += msg.data + "<br>"; 
});

问题是，我在div上显示的数据在我重新加载页面后得到清除。即使在我重新加载网页后，我想保留这些数据并继续追加msg.data的数据。我怎样才能做到这一点？我试图使用上述代码片段中的注释部分来检测页面重新加载，但每次获取msg时都会将其检测为页面重新加载事件。

更新1

如果检测重装事件，并使用session-storage是那么我可能要强调我的主要问题是检测重装事件的最好方式。每当我在msg.data（使用代码片段的注释部分检测页面重新加载事件）中获取数据时，它都会打印This page is reloaded。我想要检测我从代码的其他模块中使用的唯一手动重新加载和window.location.reload。

你把它钉在你的标签中，将数据放在会话存储器中，在文档读取时比较你的会话存储器，使用div的内容 – Stavm

我的主要问题是检测网页的重新加载事件。我尝试以各种方式检测，但正如我在问题中提到的，它检测套接字的“我的响应”事件也是一个页面重装事件。我如何避免这种情况？ – phanny

答

那么你可以检测一个网页加载事件，然后只需保存你得到了，直到页面刷新被解雇的数据，并填充它后来的附加。例如，但更好的事情是，如果该文件来检测准备好了。因为那样你就不必等待css和图像加载，就像刚才所说的那样。

//store data first 
$(document).ready(function() { 
    // your code here 
});

我会使用'document.ready'。没有点在等待CSS，图像和所有其他资产 – Stavm

好点，你是对的。 – phaen

@phanny因为sockets.on激发页面重新加载事件afaik。这就是为什么它被发现。 – phaen

答

常见的方法是缓存您的数据。你可以缓存你的msg.data到localStorage，当重新加载时，你首先尝试从localStorage获取数据，如果有的话，显示它;然后，保持套接字连接并更新。

答

你的代码很好，它可以检测到你想要的。
但重新加载页面后，JavaScript变量会清除，这是自然的和不可避免的。

您可以使用HTML5 loacal存储或Cookies，每个都有自己的优点和缺点。

请参考以下链接：
https://www.w3schools.com/html/html5_webstorage.asp https://www.w3schools.com/js/js_cookies.asp

逻辑：

$(function() { 
    if(// This page is **not reloaded**) { 
    // **clear** local storage/cookies 
    } 

    //load/append data to **local storage/cookies** 
    //populate data **from local storage/cookies** 
});

它不工作，因为我想它工作。每当我收到一个'msg.data'时，就会显示'This page reloaded'。我希望它只检测手动重新加载和'window.location.reload（）'，这是我在其他代码模块中所具有的。 – phanny

在调用'window.location.reload（）' 之前在本地存储器内部设置一个值，当页面加载时，如果它存在，这意味着您的代码执行了它。加载页面后清除该值。如果有人刷新页面加载时不存在的值。 –

答

尝试这样的事情。

function reloadFunction() { 
    //set property in local storage; 
    window.location.reload(); 
} 

$(function() { 
    if(// local storage property exists) { 
    // reloaded by code 
    // clear local storage property; 
    } else { 
    // reloaded manually 
    } 
});

答

在服务器端使用增量ID创建一个var，发送给客户端。在每次重新加载时，将此var与客户端上的var进行比较。

无法检测到实际的页面重新加载

相关推荐