Several Toolkit components support persisting their UI state across page reloads or navigation by enabling the EnablePersistence property. Typical persisted data includes values, selected items, open/closed state and paging settings (component support varies).

When EnablePersistence="true" is set on a component, the control stores its state in browser storage (usually localStorage). The storage key is derived from the component ID. Ensure components that should persist have a stable ID.

The following sample demonstrates persisting the TextBox value across page reloads using EnablePersistence:

@using Syncfusion.Blazor.Toolkit.Inputs

<SfTextBox ID="defaultTextBox" Placeholder="Enter text" EnablePersistence="true"></SfTextBox>

• Storage location: Component state is saved to browser storage (typically localStorage) when the page unloads or the component is destroyed, and restored automatically on the next page load.
• Key derivation: The storage key is derived from the component ID. For example, a TextBox with ID="defaultTextBox" stores its value under the key defaultTextBox in browser storage. Ensure each component that persists state has a unique and stable ID.
• Security considerations: Do not persist sensitive data (passwords, authentication tokens, personal information) using EnablePersistence. Browser storage is accessible to client-side JavaScript and may be visible in browser developer tools. Always handle sensitive data securely on the server side.
• Storage limits: Browser storage typically has a size limit (usually 5-10MB per domain). Avoid persisting large amounts of data to prevent storage quota exceeded errors.
• Cross-tab synchronization: Storage changes in one browser tab may not automatically refresh other open tabs. Users should refresh the page to see updates from other tabs.