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是最好的方法，那么我可能必须强调我的主要问题是检测重新加载事件。每次我在This page is reloaded中获取数据时都会打印msg.data（使用代码段的注释部分来检测页面重新加载事件）。我想检测我从代码的其他模块中使用的唯一手动重新加载和window.location.reload。

Answer 1

那么你可以检测到一个页面加载事件，然后只保存你所获得的数据，直到页面刷新被触发并填充后面附加的...例如，但更好的方法是检测文档是否是准备。因为那时你不必等待css和图像加载stavm刚说。

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

Answer 2

您的代码很好，可以检测到您想要的内容但是重新加载页面后javascript变量将会清除，这是自然而且不可避免的。

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

请参阅以下链接：
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**
});

Answer 3

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

Answer 4

尝试这样的事情。

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
  }
});

Answer 5

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

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

5 个答案: