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.
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.
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.
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.
You can test this sample on your own by downloading the project from our GitHub repository.