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

Question

我使用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中获取数据时，它都会打印msg.data(使用代码片段的注释部分来检测页面重新加载事件)。我希望检测我从代码的其他模块中使用的唯一手动重新加载和window.location.reload。

Answer 1

好的，您可以检测到一个页面加载事件，然后保存得到的数据，直到触发页面刷新，然后再用附加的数据填充它。例如，更好的方法是检测文档是否已经准备好。因为这样你就不必像stavm所说的那样等待css和图像加载了。

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

Answer 2

您的代码很好，它可以检测到您想要的内容。

但是javascript变量将在重新加载页面后清除，这是自然的，也是不可避免的。

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

参考以下链接：

webstorage.asp 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**
});

Answer 3

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