logo

Draft

Automatic draft saving to prevent data loss from accidental page closures.

When To Use

  • Long forms with risk of data loss
  • Complex configuration editing
  • Offline editing with local storage

Examples

Basic Usage

Use DraftMonitor component to monitor and auto-save drafts for any data type. Suitable for scenarios without Form component.

Features:

  • Support any data type
  • Auto-detect data changes and save
  • Support two-way binding or callback to update data
  • Flexible configuration options
expand code expand code

Form Integration

Use DraftMonitor component combined with Form to implement form draft auto-save feature. When form data changes, it will automatically save to local storage with delay. When user reopens the page, it will prompt whether to recover the unfinished draft.

Through composition rather than inheritance, you can flexibly add draft functionality to any form.

Features:

  • Auto-detect form changes and save with delay
  • Customizable delay duration (default 1000ms)
  • Version control, only recover drafts with matching version
  • Three recovery modes: confirm dialog, auto-recover, manual
  • Component-based design, easy to integrate
expand code expand code

Localization

DraftMonitor component supports internationalization, using the current locale configuration by default. You can also customize the text through the Locale parameter.

expand code expand code

Custom Recovery Dialog Content

You can customize the content of the draft recovery confirmation dialog through the RecoveryContentTemplate parameter, supporting rendering complex HTML content.

expand code expand code

Version Comparison

Implement custom version comparison to only recover drafts with matching or newer versions, automatically deleting outdated drafts.

Use Cases

  1. Prevent Old Data Overwrite: Server data has been updated, prevent users from recovering old drafts that would overwrite the latest data
  2. Multi-User Collaboration: In collaborative editing scenarios, ensure only current version drafts are recovered
  3. Version-Based Management: Manage drafts based on version numbers, automatically clean up incompatible old drafts

Test Steps

  1. Edit the document content and wait for auto-save
  2. Click "Simulate Server Update (Version++)" to simulate server-side data version upgrade
  3. Refresh the page - the old version draft will be automatically deleted (no recovery dialog)

Core Configuration

private DraftOptions draftOptions => new DraftOptions
{
    Version = formData.Version.ToString(),
    EnableVersionCheck = true,
    // Custom version comparison: only recover if draft version >= current version
    ShouldRecoverDraft = (draftVer, currentVer) =>
    {
        if (int.TryParse(draftVer, out var dv) && 
            int.TryParse(currentVer, out var cv))
        {
            return dv >= cv; // Draft version must be >= current version
        }
        return false;
    }
};
expand code expand code

API#

DraftMonitor

Property Description Type Default
Data Data to monitor TData -
DataChanged Change callback EventCallback<TData> -
Options Draft options DraftOptions -
Enabled Enable draft bool true
Locale Localization DraftLocale -
RecoveryContentTemplate Custom dialog template RenderFragment<DraftData<TData>> -
OnRecovered Recovery callback EventCallback<TData> -
OnDeleted Deletion callback EventCallback -

Methods:

  • SaveDraftAsync() - Manually save draft
  • ClearDraftAsync() - Clear draft

DraftOptions

Property Description Type Default
Key Draft identifier string -
DelayMilliseconds Save delay (ms) int 1000
RecoveryMode Recovery mode DraftRecoveryMode Confirm
Version Version number string "1.0.0"
EnableVersionCheck Version check bool true
Enabled Enable draft bool true
StorageProvider Storage provider IDraftStorageProvider null
ShouldRecoverDraft Custom version comparison function. (draftVersion, currentVersion) => bool Func<string, string, bool> null

DraftRecoveryMode

Value Description
Confirm Show confirmation dialog
Auto Auto-recover
Manual Manual handling

DraftLocale

Property Description Default
RecoveryTitle Dialog title "Draft Found"
RecoveryContent Dialog content template (supports {time} placeholder) "An unfinished draft was detected. Would you like to recover it?\n\nSaved at: {time}"
RecoveryOkText Confirm button "Recover"
RecoveryCancelText Cancel button "Delete"

Advanced

Custom Storage

public class DbDraftProvider : IDraftStorageProvider
{
    public async Task SaveAsync(string key, string data) { /* DB save */ }
    public async Task<string> LoadAsync(string key) { /* DB load */ }
    public async Task RemoveAsync(string key) { /* DB remove */ }
    public async Task<bool> ExistsAsync(string key) { /* DB check */ }
}

builder.Services.AddAntDesign();
builder.Services.AddScoped<IDraftStorageProvider, DbDraftProvider>();

Using IDraftService Directly

@inject IDraftService DraftService

@code {
    private async Task SaveDraft()
    {
        await DraftService.SaveDraftAsync("my-key", myData, options);
    }
    
    private async Task<MyData> LoadDraft()
    {
        var draft = await DraftService.LoadDraftAsync<MyData>("my-key", options);
        return draft?.Data;
    }
    
    private async Task RemoveDraft()
    {
        await DraftService.RemoveDraftAsync("my-key");
    }
}

Notes

  1. Version Control: Update version when data structure changes
  2. Storage Limits: LocalStorage ~5-10MB, use custom provider for larger data
  3. Security: Don't store sensitive data or use encryption
  4. Cleanup: Regularly clean expired drafts
  5. Multi-Tab: LocalStorage shared across tabs, use unique keys if needed