Store Data Persistent

In order to store data persistent bewteen app runs, you can make use of different database features.

Key/Value Storage with the App Settings

You can store simple key/value pairs using the App::settings property. If you format the value with JSON, you can also use this to store more complex data in a very easy way.

 import VPlayApps 1.0
 import QtQuick 2.5

 App {
   id: app
   // this property holds how often the app was started
   property int numberAppStarts

   Component.onCompleted: {
     // this code reads the numberAppStarts value from the database

     // getValue() returns undefined, if no setting for this key is found, so when this is the first start of the app
     var tempNumberAppStarts = app.settings.getValue("numberAppStarts")
     if(tempNumberAppStarts === undefined)
       tempNumberAppStarts = 1
     else
       tempNumberAppStarts++

     app.settings.setValue("numberAppStarts", tempNumberAppStarts)
     numberAppStarts = tempNumberAppStarts
   }

   NavigationStack {

     Page {
       title: "Settings"

       AppText {
         anchors.centerIn: parent
         text: "App starts: " + numberAppStarts
       }
     }
   }
 }

Key/Value Storage with QML Storage

This Storage component is used internally for the App settings from the example above. You can also use it as standalone component.

 import VPlay 2.0  // The Storage type requires to import VPlay 2.0
 import VPlayApps 1.0
 import QtQuick 2.5

 App {
   id: app
   // this property holds how often the app was started
   property int numberAppStarts

   Component.onCompleted: {
     // this code reads the numberAppStarts value from the database

     // getValue() returns undefined, if no setting for this key is found, so when this is the first start of the app
     var tempNumberAppStarts = storage.getValue("numberAppStarts")
     if(tempNumberAppStarts === undefined)
       tempNumberAppStarts = 1
     else
       tempNumberAppStarts++

     storage.setValue("numberAppStarts", tempNumberAppStarts)
     numberAppStarts = tempNumberAppStarts
   }

   Storage {
     id: storage
   }

   NavigationStack {

     Page {
       title: "Settings"

       AppText {
         anchors.centerIn: parent
         text: "App starts: " + numberAppStarts
       }
     }
   }
 }

Key/Value Storage with QML Settings

This Settings component pretty similar to the App settings, however the usage is a bit different. It uses the defined properties as keys, to store and retrieve the values.

Firebase Database and Firebase Cloud Storage

The Firebase plugin allows to use the Firebase backend services. FirebaseAuth provides e-mail authentication to create user accounts, log in and log out. You can access the FirebaseDatabase and store and retrieve user-specific data with and without authentication. Use FirebaseStorage to upload binary files to the cloud.

Use Firebase Realtime Storage to Store Data in the Cloud

This example shows how to read and write public data with the FirebaseDatabase item. If you want only authenticated users to access your database, have a look at the Private Database Example

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   FirebaseDatabase {
     id: firebaseDb

     // we store the read values in those properties to display them in our text items
     property string testValue: ""
     property string realtimeTestValue: ""

     // define which values should be read in realtime
     realtimeValueKeys: ["public/testValue"]
     // update our local realtimeTestValue property if database value changed
     onRealtimeValueChanged: {
       if(success && key === "testValue") {
         realtimeTestValue = value
       }
     }

     // update our local testValue property if read from database was successful
     onReadCompleted: {
       if(success) {
         console.debug("Read value " +  value + " for key " + key)
         testValue = value
       } else {
         console.debug("Error: "  + value)
       }
     }

     // add some debug output to check if write was successful
     onWriteCompleted: {
       if(success) {
         console.debug("Successfully wrote to DB")
       } else {
         console.debug("Write failed with error: " + message)
       }
     }
   }

   NavigationStack {
     Page {
       title: "Realtime Database"
       // our simple UI
       Column {
         anchors.fill: parent
         spacing: dp(15)

         // button to update public/testValue with test-[currenttimestamp]
         AppButton {
           text: "Update Value"
           anchors.horizontalCenter: parent.horizontalCenter
           onClicked: firebaseDb.setValue("public/testValue", "test-" + Date.now())
         }

         // button to read the public/testValue manually
         AppButton {
           text: "Get Value"
           anchors.horizontalCenter: parent.horizontalCenter
           onClicked: firebaseDb.getValue("public/testValue")
         }

         // display the testValue property with a simple property binding
         AppText {
           width: parent.width
           horizontalAlignment: AppText.AlignHCenter
           text: "Manual TestValue: " + firebaseDb.testValue
         }

         // display the realtimeTestValue property with a simple property binding
         AppText {
           width: parent.width
           horizontalAlignment: AppText.AlignHCenter
           text: "Realtime TestValue: " + firebaseDb.realtimeTestValue
         }
       }// Column
     }// Page
   }// NavigationStack
 }// App

Cloud Key/Value Storage

The WebStorage component offers storing of Key/Value pairs in the cloud.

SQLite Database to Store Data

You can access a local SQLite Database using the Qt Quick Local Storage QML Types.

Store and Access Files on the Device and in the Cloud

For more details on this, please go to Access, Store and Share Files.

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support