Model and Storage

Ionic 4/5 Model and Storage.

Model

Models help define the data structure for an app in order to simplify development. In general, a model allows you to mimic real-life scenarios in your app.
Generally, it is a custom data structure type that can be used to create new objects based on itself. Variables that are stored in certain storage can also use models as structure templates.
For instance, if you are building an app that has a map with a location markers list, you can define a Location object and a LocationsList array.

Here’s where the storage feature comes in. Let’s say your app displays the markers on the map, and you need to keep (save) the data somewhere in the app. A single location or a collection of locations can be saved into storage.

To define models and/or storage, go to Project > Model and Storage

Under the Model tab, type a name for a new model item and click Add. Then create the data structure you need by clicking Add (cloning existing model(s) can also be used) and specifying the names and types:

Supported Data Types

Models can be of Array or Object type.

When defining a model, you can use the following data types to specify the type for a specific model field:

  • String;
  • Boolean;
  • Number;
  • Array;
  • Object;
  • Any.

Storage

Storage is a virtual client-side place where any data can be stored as a string. By using models, data can be stored in specific storage based on the chosen model structure. Depending on the chosen storage, stored data will be accessible for different amounts of time.

When you are done defining the model structure, you can also create a storage variable with a matching type. To do it, switch to the Storage tab and create a new storage variable item. Note that there are now Location and LocationsList types in the Type drop-down list. That means that these storage variables will contain the same structure as the model:

Storage Types

There are 2 storage entity types you can choose in an Ionic 4/5 app:

  • Storage – works in an asynchronous way and requires that some time should be allowed before read and/or write operations can be applied.
    Data stored through Storage does not expire and remains stored on the user’s computer until an app deletes it or the user removes it through the browser settings.
    This data storage type depends on the device it is used on and can be kept, for example, in some local database for saving permanent data.

📘

Note!

More information about storing data within an Ionic app can be found here.

  • Variable – works in a synchronous way with the data saved as a variable within the service until the page reloads (like with reopening websites, PWAs, or relaunching apps, etc.). It can hold any data.

🚧

Important Note!

Please note that if you once create a variable of the Storage type and then decide to change it to the Variable type, making corresponding changes into your code will be required.
So, if the existing function was created under the CODE > Functions tab using snippets, you will need to manually edit the code everywhere it is used in the app.

If it was created by mapping, these changes will be applied automatically.

📘

Get variable/ Set variable Snippets

We also offer two snippets that can be used for setting and getting global variables for your project. Click the links to learn more:

Storage and Variable Mapping

In Ionic 4/5, mapping is also available for binding models and storage variables.
If a storage variable (Storage or Variable) is added under the Model and Storage > Storage tab, it will be automatically added to the service on any app page and can be used for any service.

For example, two new storage variables, locationData and locationsData appear on a new app page service automatically and are ready to be mapped:

However, the variables created for a specific page under its CODE > Variables tab:

can be used for this specific page only:

Best Practices

Suppose we have the database collection TravelList with the following structure:

Database collection.Database collection.

Database collection.

It’s easy to create a model Location with the same structure:

App model.App model.

App model.

Then, you can create a storage variable based on the model structure:

App storage variableApp storage variable

App storage variable

Now, when you use the service to get the TravelList collection data, you can map its response to your storage variable, as in the following:

Mapping.Mapping.

Mapping.

This approach will be effective only when you need to get a single item for the TravelList collection. To get the whole list of customers, you should create another model with the type of Array and array items type as Location:

App model.App model.

App model.

Note the second model with the name LocationsList. Now you can change your storage variable type to LocationsList.

After the following mapping, the storage variable travelList will contain a travel list array:

Mapping.Mapping.

Mapping.