Not able to detect actual page reload

Question

I am using the socket in javascript to emit data. Following is the code snippet.

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

The problem is that the data I am displaying on the div is getting cleared once I reload the page. I want to retain the data and continue appending the data from msg.data even after I reload the web page. How can I achieve this? I was trying to detect page reload using the commented part in the above code snippet but it is detecting it as page reload event every time I get the msg.

UPDATE 1

If detecting reload event and using session-storage is the best way then I may have to emphasize on my main issue which is to detect a reload event. It's printing This page is reloaded every time I get data in msg.data(Using the commented part of the code snippet for detecting page reload event). I want to detect the only manual reloads and window.location.reload which I used from other modules of my code.

Answer 1

Try something like this.

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 2

On server side make a var with incremental ID, send it to client. On each reload, compare this var with the one on client side.

Answer 3

Well you could detect a page load event, and then just save the data you got until the page refresh was fired and populate it with the appended afterwards.. for example, but a better thing would be to detect if the document is ready. Because then you dont have to wait for css and images to load as stavm just said.

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

Answer 4

the common way is cache your data. you can cache your msg.data to localStorage, when reload, you first try to get data from localStorage, if it has, show it; then, keep socket connection and update.

Answer 5

Your code is fine and it can detect what you want.
But javascript variables will clear after reloading the page and it is natural and unavoidable.

You can use HTML5 loacal storage or Cookies and each have its own pros and cons.

Refer following links:
https://www.w3schools.com/html/html5_webstorage.asp https://www.w3schools.com/js/js_cookies.asp

Logic :

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

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