In order to provide the true WYSIWYG rendering and the unique pixel-perfect editing experience, the document is getting synchronized with the server using a WebSocket connection. A constant connection is required in order to maintain the document.

This sample shows how to use the local browser storage to save the document locally in order to recover the document when the connection is lost.

In the textControlLoaded event, the autoSaveDocument function is attached to an interval of 500 milliseconds. This is a background task and will not influence the user editing experience.

TXTextControl.addEventListener("textControlLoaded", function (e) {
      // disable the loading progress dialog
      TXTextControl.isLoadingDialogEnabled = false;

      // restore the document
      restoreDocument();

      // set auto save to 500 milliseconds
    var intervalAutoSave = setInterval(autoSaveDocument, 500);
});

In the autoSaveDocument function, the document is saved in the internal Text Control format and is stored in the local browser session storage. This storage is session-wide and can be accessed browser tab-wide. If you need to implement a "per document" session, you might want to give the session storage entry a unique name.

function autoSaveDocument() {
      // store the document in the session storage
      // which is shared over all browser tabs (complete session)
      TXTextControl.saveDocument(
          TXTextControl.streamType.InternalUnicodeFormat, function (e) {
              sessionStorage.document = e.data;
          }
      );
}

In case, the connection is lost, TX Text Control fires the event webSocketClosed. In this event, we simply reload the page in order to reconnect to the server.

TXTextControl.addEventListener("webSocketClosed", function (e) {
    // reload, if connection is lost
    location.reload();
});

In the textControlLoaded event (see first code snippet), the function restoreDocument is called. This function is loading the stored document from the session storage in case it is available.

function restoreDocument() {
      // if document exists, load it from the session storage
      if (sessionStorage["document"]) {

          $("#txReconnectMsg").show(); // hide dialog

        TXTextControl.loadDocument(
            TXTextControl.streamType.InternalUnicodeFormat,
              sessionStorage.document);
      }
      else
          $("#txReconnectMsg").hide(); // hide dialog
}

Other events are used to show and hide messages informing the user that the application is trying to reconnect to the server. The following snippet shows the complete JavaScript that is required to implement this feature:

TXTextControl.addEventListener("textControlLoaded", function (e) {
      // disable the loading progress dialog
      TXTextControl.isLoadingDialogEnabled = false;

      // restore the document
      restoreDocument();

      // set auto save to 500 milliseconds
    var intervalAutoSave = setInterval(autoSaveDocument, 500);
});

  TXTextControl.addEventListener("webSocketClosed", function (e) {
      // reload, if connection is lost
      location.reload();
  });

  TXTextControl.addEventListener("documentLoaded", function (e) {
      $("#txReconnectMsg").hide(); // show dialog
  });

  function autoSaveDocument() {
      // store the document in the session storage
      // which is shared over all browser tabs (complete session)
      TXTextControl.saveDocument(
          TXTextControl.streamType.InternalUnicodeFormat, function (e) {
              sessionStorage.document = e.data;
          }
      );
}

  function restoreDocument() {
      // if document exists, load it from the session storage
      if (sessionStorage["document"]) {

          $("#txReconnectMsg").show(); // hide dialog

        TXTextControl.loadDocument(
            TXTextControl.streamType.InternalUnicodeFormat,
              sessionStorage.document);
      }
      else
          $("#txReconnectMsg").hide(); // hide dialog
}

You can test this sample on your own by downloading the project from our GitHub repository.