Choose where page state belongs
Choose URL, cookie, tab-session or local-browser storage according to the user’s goal and the data’s lifetime.
Choose URL, cookie, tab-session or local-browser storage according to the user’s goal and the data’s lifetime.
Start with the user’s goal
Section titled “Start with the user’s goal”Decide whether the state must be shareable, remain in this tab, survive a browser restart, or belong to a user account across devices. These requirements lead to different storage choices.
| Goal | Choose | Reason |
|---|---|---|
| Share a filtered list or selected record in a link | Query Manager | The state is in the URL and travels with the link. |
| Keep a temporary draft in the current page session | Session Manager | The state is scoped to the tab’s session and can survive a reload. |
| Remember a non-sensitive preference on this browser | Local Manager | The value can persist beyond the current page session on the same origin. |
| Send a small browser-visible preference with matching HTTP requests | Cookie Manager | A cookie has explicit request/domain/path and expiry behavior. |
| Store account data, permissions or cross-device records | Server-side data and Security Provider | Browser state is editable and is not a trusted database or identity proof. |
Bind through the manager’s data property
Section titled “Bind through the manager’s data property”For a component named localState, use localState.data.wappler_docs_preference. The equivalent paths begin sessionState.data, cookieState.data or queryState.data. Defining an item in a picker creates metadata; a Set action writes its runtime value.
Keep types and lifetime explicit
Section titled “Keep types and lifetime explicit”Query and cookie values are strings. Local and Session Manager serialize JSON-compatible values, so numbers, booleans and plain objects can be represented, but functions/prototypes do not survive. Cookie lifetime depends on its expiry; a cookie without expiry is not automatically a permanent preference. Browser policy can clear or reject storage. See the HTML Web Storage specification for browser-defined storage scope.
Example: compact view versus a selected record
Section titled “Example: compact view versus a selected record”Use Local Manager for a compact-view preference when it should remain on this browser. Use Query Manager for a selected record id when a copied link should open that record. The server must still validate the record id and authorize access. Storing an id in a query or cookie never grants permission to the record.
Remove the data you own
Section titled “Remove the data you own”Use explicit key names and remove completed drafts or obsolete preferences deliberately. Local/Session Remove All clears the shared dmxState- keys for its storage scope, not just one component ID. Cookie scope must match for removal, and the installed Cookie Remove All has a callback issue. Use the focused guides and references for the exact action behavior.
Build one small example
Section titled “Build one small example”Choose the store that fits the goal, write a dedicated test key, bind its value and verify its lifetime and removal before connecting it to a larger form or page.
Check your result
Section titled “Check your result”You can choose a state store, use its correct binding path and keep browser convenience state separate from server-owned data.