Browser Autosave Support

Enlivy’s browser autosave functionality helps ensure that no data is lost while users are filling out forms.

Whether you’re adding an user, invoice, product, client, or any other entity, autosave is designed to preserve form inputs in the event of accidental tab closures, page refreshes, or unintentional navigation.

This feature is currently enabled across all add-entity, and edit-entity forms in the platform. It plays a crucial role in enhancing the user experience by allowing a seamless recovery of unsaved changes.

When Does Autosave Trigger?

Autosave is automatically triggered in the following scenarios:

• Page refresh or tab close: If the tab is accidentally closed or refreshed.
• Internal or external navigation: Navigating away from the form (both within and outside the Enlivy app).
• Form unmounting: When the form component is removed from the DOM (e.g., user navigates to another route).

Additionally, autosave is initiated on every field-level interaction, including:

• Typing in an input field.
• Toggling a checkbox.
• Selecting a value from a dropdown or radio group.

These interactions are detected through controlled form inputs and debounced to avoid excessive writes to the browser’s local storage.

Autosave During Editing

Enlivy’s autosave functionality is not limited to creating new entries—it also applies when editing existing entities such as invoices, contracts, playbooks, products, and more.

Just like with add-entity forms, any changes made during the editing process are automatically saved to prevent data loss in scenarios like:

• Accidental tab or browser closure
• Page refresh
• Navigation away from the edit screen
• Component unmounting due to routing changes

Autosave is triggered on every field-level interaction (typing, selecting, toggling, etc.), ensuring that your progress is preserved in real time—even during mid-edit.

When you return to the entity, you’ll be prompted to restore or discard the saved draft, allowing you to seamlessly continue where you left off.

This consistent autosave behavior across both add and edit workflows enhances reliability and protects your input at every stage.

Where Is the Data Stored?

Autosaved data is stored entirely client-side using the localStorage API. No data is transmitted to the server until a manual form submission occurs.

Storage characteristics:

• Scoped by organization: Each entity’s autosaved data is saved under a key tied to the current organization ID (multi-org support).
• Scoped by entity type: Separate storage paths exist for invoices, products, clients, etc.
• JSON structure: Data is serialized as JSON and organized by field name.

When Is Autosaved Data Cleared?

Data stored by the autosave system is cleared under the following conditions:

• Successful submission of the form.
• Manual discard/reset by the user.
• Browser cache or localStorage is cleared manually.
• Using a different browser/device (autosave is not synced across sessions).

Technical Implementation Details (Vue 3)

The autosave functionality in Enlivy is implemented across all add-entity forms using Vue 3’s Composition API. The goal is to preserve unsaved data seamlessly across user sessions or unexpected interruptions.

• Storage Layer: Autosaved data is stored in the browser’s localStorage, using structured keys based on:
  • The current organizationId
  • The entity type being created (e.g., invoices, products)

Example Storage Format in localStorage

[
  {
    "organization_id": "org_id_1",
    "entities": [
      {
        "entity": "organization_invoice_internal",
        "datetime": "2025-05-12T11:32:05.466Z",
        "data": {} // Saved form data
      }
    ]
  },
  {
    "organization_id": "org_id_2",
    "entities": [
      {
        "entity": "organization_invoice_internal",
        "datetime": "2025-05-12T11:35:58.597Z",
        "data": {} // Saved form data
      }
    ]
  }
]

Autosave Logic
Saving Autosaved Data
You can watch the reactive form data exchanging:

watchDeep(
  () => entity.value,
  (newEntityValue) => {
    emit('autosave', {
      entity: newEntityValue
    });
  },
);

Restoring Autosaved Data when user’s data is Restored:

When the user is restoring the form data, the data is re-written with the auto-save data from the localstorage:

watchDeep(
  () => props.autosavedDataToRestore,
  (newData, oldData) => {
     entity.value = newData;
  }
);