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

【问题标题】：Not able to detect actual page reload无法检测到实际的页面重新加载
【发布时间】：2018-02-07 18:53:14
【问题描述】：

我在 javascript 中使用套接字来发出数据。以下是代码sn-p。

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 追加数据，即使在我重新加载网页后也是如此。我怎样才能做到这一点？我试图使用上述代码 sn-p 中的注释部分检测页面重新加载，但每次收到msg 时，它都会将其检测为页面重新加载事件。

更新 1

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

【问题讨论】：

您将其钉在标签中，将数据放入会话存储中，在文档读取时将您的会话存储与 div 的内容进行比较
我的主要问题是检测网页的重新加载事件。我尝试以各种方式进行检测，但正如我在问题中提到的那样，它检测套接字的my response 事件也作为页面重新加载事件。我该如何避免这种情况？

标签： javascript jquery html local-storage session-storage

【解决方案1】：

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

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

【讨论】：

我会使用document.ready。等待 CSS、图像和所有其他资产没有意义
@phanny 因为 sockets.on 触发了页面重新加载事件 afaik。这就是它被检测到的原因。

【解决方案2】：

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

您可以使用 HTML5 本地存储或 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 is reloaded。我希望它只检测手动重新加载和window.location.reload()，我在代码的其他各种模块中都有。
在调用window.location.reload()之前在本地存储中设置一个值，如果在页面加载时存在，这意味着你的代码做到了。加载页面后清除该值。如果有人刷新页面加载时不存在的值。

【解决方案3】：

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

【讨论】：

【解决方案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
  }
});

【讨论】：

【解决方案5】：

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

【讨论】：