Data Store: edit records in browser storage
Maintain a browser-local collection with insert, update and delete actions.
Maintain a browser-local collection with insert, update and delete actions.
Before you begin
Section titled “Before you begin”- An App Connect page with the matching extension included and a known array of record objects.
Use local persistence for local work
Section titled “Use local persistence for local work”Data Store keeps records in localStorage by default, or sessionStorage when Use Session Storage is enabled. It is separate from the server database. Treat it as a draft/cart/preference store, not the authority for price, identity or permissions.
Configure the store and schema
Section titled “Configure the store and schema”ID identifies the store and its storage key datastore_
| Control or value | Meaning and use |
|---|---|
| data | The displayed record array, including generated columns when configured. |
| $id | The store assigns an incrementing local id to inserted records. Keep this separate from a server record id and do not provide your own $id field in new data. Clear resets its local counter. |
| Generated Columns | Adds derived fields to exposed data from each record’s scope. These fields are computed for the view; the stored base record remains the input for mutation filters. |
| Use Session Storage | Uses the tab session’s store instead of persistent localStorage. Changing the flag is not a migration between the two stores. |
Set values and select records explicitly
Section titled “Set values and select records explicitly”Insert Record supplies field values. Update Record(s) supplies Which Records and New Values. Update or Insert updates matches or inserts the supplied values when there is no match. Delete Record(s) removes matches. Clear Data Store removes all records from this store and resets its local ids.
| Control or value | Meaning and use |
|---|---|
| Filter semantics | Object filters use strict equality with OR semantics: matching any supplied field is enough. {status:'open',owner:7} does not mean both conditions. Prefer a single $id for an individual edit/delete. Empty filters match no records. |
| Update payload | Only supplied properties are merged. Values containing {{ are evaluated as expressions against the old record; keep literal text and intentional expressions distinct. |
| Start Batch / End Batch | Batch delays refreshing exposed data until End Batch. Writes are still scheduled to browser storage; this is not an atomic transaction or rollback mechanism. |
| Inserted / Updated / Deleted | Events provide inserted and deleted record arrays; Updated uses old records in deleted and replacements in inserted. Clear does not emit a Deleted event for every row. |
Example: a local draft list
Section titled “Example: a local draft list”Create a store draftItems and declare title. Insert {title:‘Notebook’} into an empty store. Read draftItems.data and note its generated $id. Update using that numeric $id and {title:‘Pencil’}, then confirm the one record changes. Delete by the same $id and verify data is empty. Use a separate documentation store rather than clearing an existing application store.
Know the installed filter and storage boundaries
Section titled “Know the installed filter and storage boundaries”Array filters in the installed _filter loop have a const counter that can throw when advancing; use a supported single object/id filter. Delete uses its own object filter path, so do not assume array filter support. Browser storage can be cleared or rejected; changes are not server-synchronized or safe from local editing. Generated columns should not be used as though they were persisted filter fields.
Use a complete page example
Section titled “Use a complete page example”Continue with the matching workflow to connect this component to the surrounding page.
Check your result
Section titled “Check your result”You can configure the component, use its exact output shape and verify selection, filtering or local editing with known example records.