If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

In this tutorial, you’ll learn how to build an app where input is entered into a first page, saved into the browser’s local storage, and then displayed on a second page.

The app will look like:
000-ReadyApp

Before you begin

Tutorial level: beginner.
Prerequisites: an Appery.io account.

Creating new app

Create a new app, and call it HelloWorld. When the builder loads, open startScreen:
001-StartScreen

Building the input page

On the first page, we’re going to place an input field and a button to save the value into storage:
002-UI

  1. Change the caption in the header to App.
  2. Drag and drop an Input component. In Properties, clear the Text field, and type Input into the Placeholder field. Change the component name to Input.
  3. Drag and drop a Button component, and change its label to Save. In Properties, change the button Name to saveButton.

Click “Test” to open the app in a web browser.

Building the result page

1. From Project view: Create New > Page.

2. For page Name, enter Result.

3. Click “Create Page.”

4. Build the following UI:
003-Result_UI

5. To add a back button to the header, select the header, and check “Back Button”.

6. For the Label component, change the Name to Output.

Creating a storage variable

1. From Project view open Project > Model and Storage.

2. Open the Storage tab. Add a new storage variable of String type named text:
004-AddingVariable

Saving data to storage

1. Open startScreen.

2. Select the button, and open the Events tab. You’ll save the input into storage when the button is clicked.

3. The component and event should be set (button defaults to a Click event, but you can change it):
005-AddingEvent

If they’re not set, select saveButton from the Component list, and Click from the event list.

4. From the action list, select Set storage variable:

  • For the Variable name, select text. That’s the name of the storage variable.
  • Check “Bind to Component.” This will allow you to get the value from the input element.
  • For the target component, select Input.
  • For the property name, select Text.

We’re taking the value from the input element, and saving it into the storage variable text:
006-AddingEvent

5. Click “Save”.

Navigating to the second page

  1. Select the button.
  2. Open the Events tab.
  3. With the component set to saveButton, and the event to Click, select the Navigate to Page action.
  4. For page, select Result.
  5. Click “Save”.

The button now has two actions:
007-ButtonActions

Reading data from storage

  1. Open the Result page. When the page loads, we need to read the value from storage, and display it using the Label component.
  2. Open the Events tab.
  3. From the component list, select Result.
  4. From the event list, select Load.
  5. From the action list, select Set property.
    • For the component name, select Output.
    • For the property name, select Text.
    • Check “Read from local storage variable”.
    • For value, select text, and then click “Save”:
      008-AddingEvent

We have the back button in the header. Since this is a default back button from jQuery Mobile, it’ll automatically navigate to the previous page, so we don’t need to define any events for it.

Testing the app

Now that the app is done, test it in the browser.

The app should look like:
000-ReadyApp

Result page:
009-ReadyApp

To test the app on the device, open the Test menu, and check “Public”. Scan the QR code or email the app link to your device.

Note: Learn about other ways to test an app via the link.

Using local storage API directly (optional)

Appery.io provides actions such as Create storage variable, and Navigate to page, to make building apps simpler and faster. Behind these actions are standard local storage API calls. Using the API directly is optional, but you’ll get a good idea of how the app works.

Modifying startScreen

1. Open startScreen.

2. Select the button and open Events. You’ll see the two actions we defined.

3. Delete both actions.

4. Still using the Click event, add a Run JavaScript action with the following code:

The first line reads the value from the input field (learn more about Appery.io JavaScript API). It’s also possible to use a plain jQuery API. The second line uses the browser’s local storage API to save user input.  The third line navigates to the second page.

5. Save.

6. Open the Results page.

7. Open Events.

8. Delete the Load event (if you don’t see the event, click “Show All”).

9. Add a new Load event to the page; the action this time is Run JavaScript.

10. Enter the following code:

The first line reads the value from local storage; this is just using the browser API. The second line sets the value to the label.

11. Save.

Now test the app; the result should be exactly the same.