Building Hello World app with HTML5 Local Storage

What are we going to build?

In this tutorial we are going to build an app where input entered on the first is saved into browser’s local storage and then displayed on the second page.

Before you start

Tutorial level: Beginner
Prerequisites: Tiggzi account

Creating new app

Create a new app, call it: HelloWorld. When the builder loads, open startScreen page:

Now that we have the app, let’s design the first page.

Building the input page

On the first page we are going to have an input and a button to save the value into local storage:

1. Change the caption in the header to: App (or anything else you want)
2. Drag and drop an Input component.
   1. In Properties, check Placeholder
   2. In Properties, change the component Name to: Input
3. Drag and drop a Button component, change its label to Save
   1. In Properties, change the button name to: saveButton

You can click Test, to open the app in 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:
   
5. To add a back button to the header, select the header and check Back Button option
6. For the Label component, change its name to: Output

We are done with the UI. Next we are going to work on saving data into local storage and displaying it on the Result page.

Saving data into local storage

1. Open startScreen
2. Select the button and open Events tab. We are going to save user entered input into local storage when the button is clicked.
3. The Component and Event should be set (button defaults to click event, but you can always change it):
   
   If not set, select saveButton from Component list and Click from Event.
4. From Action list, select Set local storage variable action
   1. For Variable name enter: text. That’s the name of the local storage variable
   2. Check Bind to Component. This will allow us to get the value from the input element
   3. Target component select: Input
   4. Property name select: Text
      We are taking the value from the input element and saving it into local storage named: text
      
5. Click the green check icon to save.

After we save the data into local storage, we need to navigate to the second page.

1. Select the button
2. Open Events tab
3. With Compoent set to saveButton and event to Click, select Navigate to Page action
4. For Page, select Results
5. Click the green plus icon to save.

The button now has two actions:

Reading data from local storage

1. Open Result page. When the page load, we would like to read the value from local storage and display it using the Label component.
2. Open Events tab
3. From Component list select: Result. That’s the page
4. From Event, select: Load
5. From Action, select: Set property
   1. For Component name, select: Output
   2. For Property name, select: Text
   3. Check Read from local storage variable
   4. For Value, select: text
      
6. To save this event, click the green plus icon.

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

Testing the app

Now that we are done with the app, go ahead and test in the browser. The app should work like this:

Result page:

Using local storage API directly (optional)

Tiggzi provides action such as Create local storage variable, Navigate to page - in order to make it simpler and faster to build apps. Behind these actions are standard local storage API calls. This part is optional but you will get a good idea how the app works.

Modifying startScreen page

1. Open startScreen
2. Select the button and open Events. You will see the two actions we defined.
3. Delete both actions
4. Still using the Click event, add Run JavaScript action with the following code:

   var input = Tiggzi('Input').val();
   localStorage.setItem('text', input);
   Tiggzi.navigateTo('Result', {});

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

5. Save.
6. Open Result 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 but the action this time is Run JavaScript.
10. Enter the following code:

    var text = localStorage.getItem('text');
    Tiggzi('Output').text(text);

    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.
12. Go ahead and test the app, the result will be identical.