Skip to main content

Share data between app pages

Learn how to pass data between pages in Retool apps.

Apps use global and per-page scopes for components, frames, and code.

  • Globally scoped objects can be referenced across multiple pages. Retool continually evaluates globally scoped objects regardless of the page currently in view.
  • Page-scoped objects can only be referenced within the same page. Retool only evaluates page-scoped objects when the page is currently being viewed.

If you need to share data between pages, you can use globally scoped variables, localStorage, or URL parameters.

Share data using global variables​

Variables temporarily store data for the duration of the user's app session. They can also include an optional initial value.

To create a global variable, navigate to the Code tab and click + > Variable. As the variable is globally scoped, you can update its value from any page using event handlers, or with the setIn() and setValue() JavaScript methods.

Store page data in a global variable.

You can then reference the global variable from any screen.

Reference a global variable in a page.

For example, you can use the Table component's Double Click Row event handler to store the selected row data in a global variable. You can then reference the global variable in another page, such as a component value.

If a user closes the tab, navigates away from the app, or opens the app in another tab, the variable reverts to its initial value.

Store page data in localStorage​

localStorage does not encrypt data. Only use localStorage to store nonsensitive information.

localStorage temporarily stores data in the browser's localStorage. Unlike variables, localStorage is a persistent data store. Provided the user continues to use the same browser and has not cleared their browsing history or cache, data remains available.

Use event handlers or the setValue() JavaScript method to store data in localStorage. You can also clear app-specific data using clear().

Append data as URL parameters​

Do not use URL parameters for sensitive information. URL parameters are plain text and often included when sharing URLs.

You can configure URL query parameters on a per-page basis. As with URL queries for single-page apps, pages can store values in the URL.

To use URL query parameters, select a page and then configure its URL search params and URL hash params key-value properties. You reference property values, such as textInput1.value, which dynamically updates the URL parameter. You can also access URL parameters for the page using url, such as configuring the default value of a component to the initial URL parameter value when launching the app.

Configure URL parameters.