Modern 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 to use the local storage to store the current document locally and how to restore it. This can be helpful to auto save and recover a document when a connection has been disconnected.

HTML5: Store documents using the local browser storage

The button Store document locally is in an AJAX UpdatePanel to save the document code-behind. Additionally, a hidden field is used to temporary store the document during the AJAX call.

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnStore" runat="server"
Text="Store document locally" OnClick="btnStore_Click" />
<input onclick="restoreDocument()"
id="btnRecover" type="button" value="Restore" />
<asp:HiddenField ID="hiddenDocument" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
view raw index.aspx hosted with ❤ by GitHub

On the button click event, the document is saved to a byte array and returned to the hidden field value as a Base64 based encoded string:

protected void btnStore_Click(object sender, EventArgs e)
{
// save the document and store in a hidden field
// as a Base64 encoded string
byte[] data;
TextControl1.SaveText(out data,
TXTextControl.Web.BinaryStreamType.InternalUnicodeFormat);
hiddenDocument.Value = Convert.ToBase64String(data);
// call the 'storeDocument()' JS function
System.Web.UI.ScriptManager.RegisterClientScriptBlock(
this, this.GetType(),
"CallStoreDocument",
"storeDocument();", true);
}
view raw index.aspx.cs hosted with ❤ by GitHub

Back on the client, the hidden field value is saved to the local storage:

// Stores the content of the
// hidden field to the local storage (Base64 string)
function storeDocument() {
localStorage.document = $("#hiddenDocument").val();
showMessage("Document has been stored to local storage.");
}
view raw storeDocument.js hosted with ❤ by GitHub

The button Restore gets the document from the local storage and loads it back into TX Text Control:

// Loads the stored document back into the Text Control
function restoreDocument() {
TXTextControl.loadDocument(
TXTextControl.streamType.InternalUnicodeFormat,
localStorage.document);
}
view raw restoreDocument.js hosted with ❤ by GitHub

The document is now stored in the local storage and you can restore the document even after the browser has been closed or restarted.

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