Modern HTML5-based web browsers support persistent data storage with an enhanced capacity up to 50MB local storage. It is possible to store data persistently or session based.

This sample shows how use the local storage to autosave documents and how to restore documents when the page is refreshed or reloaded.

The following Javascript stores the document in an interval of 5 seconds and restores the document when the TX Text Control is initialized:

TXTextControl.addEventListener("ribbonTabsLoaded", function (e) {
    restoreDocument();
    var intervalAutoSave = setInterval(autoSaveDocument, 5000);
});

function autoSaveDocument() {
    TXTextControl.saveDocument(TXTextControl.streamType.InternalUnicodeFormat, function (e) {
        localStorage.document = e.data;
    });
}

function restoreDocument() {
    if (localStorage["document"]) {
        TXTextControl.loadDocument(
            TXTextControl.streamType.InternalUnicodeFormat,
            localStorage.document);

        $(".info").css("display", "inline-block");
    }
}

When the Web.TextControl is loaded completely, the ribbonTabsLoaded event is fired. In this event, the interval is created and a previously stored document is loaded.

The function autoSaveDocument uses the saveDocument method to store the document in the local storage variable document.

The function restoreDocument is loading the stored document back into TX Text Control using loadDocument. Finally, a green info bar is displayed to visualize that a document has been restored.

Download the sample from GitHub and test it on your own.