# App Model

The **App Model** functions similar to a page's [data model](/v1/reference/form-settings/data-model.md), except that it is accessible to every page in your site. You can also reference data in the App Model from elements that are not bound to a page, such as [Navigation menus](/v1/reference/site-settings/navigationoverview.md#custom-navigation-menus) and [slots](/v1/reference/site-settings/slots-code-injection.md). App data can be cached in local storage for fast performance.

### Referencing the App Model

The App model is simply a JSON object that can be globally referenced as `app.key`

* In a JavaScript function or calculation
  * `app.key`
* In VueJS template syntax (within HTML code)
  * `{{app.key}}`

### Inserting Data to the App Model

This can be done in several ways:

* Set the default data / keys in the **Environment > App Model** tab in your [**site settings**](/v1/reference/site-settings.md).
* With a [**function action**](/v1/reference/actions-processor/actions_overview/function-1.md), use the code `app.key = 'value'` to change or set data
* In a **Hook Script** set/modify the [$$BF\_App ](/v1/reference/hooksoverview/filemaker-globals/usdusdbf_app.md)global variable using FileMaker's JSON functions

### App Model Caching (bf-v0.10.4+)

The `app` data model keys can be individually cached in the browsers local or session storage.

This feature is enabled within the app model editing page of the page builder.

* **Use Local Storage** - This data will persist from session to session, and remain even after the browser has been closed.
* **Use Session Storage** - This data will survive a page refresh, but will not survive after the tab has been closed in the browser.

As your application loads, BetterForms will first check the **Session Storage** and if enabled, try to pull data from there, if that is not successful, it will check the **Local Storage** if enabled and attempt to populate data from there. By allowing separate control, you can have a given tabs context preserved.

Keys that are set for caching will automatically be saved locally as they are changed. No additional cache management is required.

{% hint style="warning" %}
**Security:** It is important to be mindful of sensitive data. Browser side caching is not encrypted and as such can be viewed directly by users.

You can clear local storage explicitly upon logout via an action function with the below JS code. This is not a security mitigation, but may be considered under some circumstances.

```
window.localStorage.clear();
```

{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.klai.studio/v1/reference/site-settings/app-model.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.