Note: Mobile development was removed in MyEclipse 2016. This tutorial only applies to MyEclipse 2015.

1. Add an Input Element

To use local storage, your app must have an input element in which the user enters information.

1. Create a PhoneGap Mobile application project, and open the index.html file found in the www folder.
2. In the code section, add a blank line in your source code in the position you want the input element.
   
   Example editing window
3. Drag the textinput widget from the widget Palette to the blank line. This opens the Insert Tag window for editing properties.
4. Type Your Name: in the Label field.
5. Type myNametxt in the ID field, and click Finish.
   
   Insert Tag wizard

The code is inserted into the index.html file and reflects the new element.

Design and source views

2. Add a Document Ready Function

Now that you have an input field, create a function that will run when the file is loaded. You can test the function before going further using an alert.

1. Add a document ready function inside the head tag.
   
   Editing window
2. Inside the Document Ready function, add a keyup function to bind the text box. This example also contains an alert function for testing.
   

   $( "#myNametxt" ).keyup(function() {alert( "Added letter." );});

   The complete code:
   
   Completed code in the editing window

When you run the app, an alert pops up verifying the function was called.

3. Test the Project in the Simulator

1. Right click the project folder and select PhoneGap>Preview App in Mobile Web Simulator.
2. Select a platform for launching the app. The Mobile Web Simulator opens with your project running. 
3. Enter text into the text box to test the application. The alert box appears indicating the function is working.
   
   App running in the Mobile Web Simulator
4. Close the simulator.

4. Add Code to Store Data in Local Storage

The local storage call has two arguments, Key and Value. The Key is the name of the local storage item. Value is the string contained in local storage. 

localStorage.setItem(Key, Value);

Set the Key as ‘myName’ and the value with the value of the text box into the keyup function.

localStorage.setItem('myName', $("#myNametxt").val());

Editing window

5. View Local Storage Data with Developer Tools

1. Run the app in the web simulator again, and enter text into the text box.
2. Access the Chrome Developer tools by right-clicking the simulator and selecting Inspect Element.
3. Select Resources, expand Local Storage, and select the http: option.
4. The local storage for the html file appears in the Key and Value columns.
   
   Chrome Developer Tools window

6. Recall the local storage

To recall local storage, use the getItem function. It accepts only a single argument, the Key of the local storage item.

localStorage.getItem('myName')

Assign the local storage key to the text box’s value in the document ready function.

Editing window

Test the app.  On startup, the local storage item is placed into the text box.