卸载前如何保存网页状态

Question

I am designing a quiz web application as part of a classroom assignment. The application's goal is to evaluate the javascript skills of a student. When the user closes the browser and revisits the application, the application should check the local storage and display a message asking if the player would like to continue from where he/she left.

So, I want to save the state of an application before the user closes the window or tab.

I am using onunload which is not working in chrome. I tested it in IE and it works fine.

In IE I have found another problem. The onunload function is not able to access the local variables. For example console.log(localVar) is printing undefined as the variable's value.

At the end I would like to run the application in chrome, mozilla and IE.

I can update the local storage on every user action. But this consumes resources on the browser. Besides, there is a timer which shows the time left for the quiz to complete. I am afraid this is a bad approach to update the local storage everytime. So I thought I will do it in onunload or onbeforeunload functions.

Below is the code.

window.onbeforeunload = function() {  // tried both unload and onbeforeunload
        console.log(currentRoundNumber); // prints undefined in IE.
        return false;
    }

Answer 1

You can probably notify the user when trying to leave the page. However, updating locationStorage in itself is a better approach though.

 window.addEventListener("beforeunload", function (e) {
      var confirmationMessage = "\o/";

      (e || window.event).returnValue = confirmationMessage; //IE
      return confirmationMessage;                            //Webkit, Safari, Chrome
    });