HTML5: Store Documents Using the Local Browser Storage
Modern browsers support up to 50MB of persistent local storage. This tutorial saves a Web.TextControl document as a Base64-encoded string in localStorage via an AJAX round-trip. Restoring reads the stored value and loads it into the editor, preserving document content across sessions.

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.
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>
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);
}
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.");
}
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);
}
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.
![]()
Download and Fork This Sample on GitHub
We proudly host our sample code on github.com/TextControl.
Please fork and contribute.
Requirements for this sample
- Visual Studio 2012 or better
- TX Text Control .NET Server (trial sufficient)
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Angular
- Blazor
- React
- JavaScript
- ASP.NET MVC, ASP.NET Core, and WebForms
Related Posts
ASP.NET MVC: Implementing a Simplistic, Custom Button Bar
This ASP.NET MVC sample replaces the Web.TextControl ribbon bar with a custom button bar built in HTML, CSS, and JavaScript. Toggle buttons apply formatting commands like bold, while the…
ASP.NET MVC: Adding Protected Sections to Documents
SubTextParts in TX Text Control mark document regions as non-editable in Web.TextControl. An MVC controller method converts selected text into a SubTextPart using ServerTextControl, and…
ASP.NETReportingElectronic Signature
ASP.NET: Adding Electronic Signatures to Documents
An ASP.NET MVC sample demonstrates electronic signatures using an HTML5 canvas-based JavaScript signature pad. The captured signature image is sent to a controller action, which merges it into a…
MVC: Loading Files from the Backstage Menu
An MVC partial backstage view lists available files from a directory using a simple document model. When a user clicks a file, JavaScript sends an AJAX request to an HttpPost controller method…
MVC: Replace the File Menu with a Backstage View Menu
Replace the Web.TextControl File menu with a full-page backstage view using JavaScript and CSS. The tutorial disables the default FILE ribbon handler, renders a vertical navigation panel with…
