本地存储 - SQL（Local Storage - SQL）

Qt Quick支持一个与浏览器由区别的本地存储编程接口。需要使用”import QtQuick.LocalStorage 2.0”语句来导入后才能使用这个编程接口。

通常使用基于给定的数据库名称和版本号使用系统特定位置的唯一文件ID号来存储数据到一个SQLITE数据库中。无法列出或者删除已有的数据库。你可以使用QQmlEngine::offlineStoragePate()来寻找本地存储。

使用这个编程接口你首选需要创建一个数据库对象，然后在这个数据库上创建数据库事务。每个事务可以包含一个或多个SQL查询。当一个SQL查询在事务中失败后，事务会回滚。

例如你可以使用本地存储从一个简单的注释表中读取一个文本列：

  1. import QtQuick 2.2
  2. import QtQuick.LocalStorage 2.0
  4. Item {
  5.     Component.onCompleted: {
  6.         var db = LocalStorage.openDatabaseSync("MyExample", "1.0", "Example database", 10000);
  7.         db.transaction( function(tx) {
  8.             var result = tx.executeSql('select * from notes');
  9.             for(var i = 0; i < result.rows.length; i++) {
  10.                     print(result.rows[i].text);
  11.                 }
  12.             }
  13.         });
  14.     }
  15. }

疯狂的矩形框（Crazy Rectangle）

假设我们想要存储一个矩形在场景中的位置。

本地存储 - SQL（Local Storage - SQL） - 图1

下面是我们的基础代码。

  1. import QtQuick 2.2
  3. Item {
  4.     width: 400
  5.     height: 400
  7.     Rectangle {
  8.         id: crazy
  9.         objectName: 'crazy'
  10.         width: 100
  11.         height: 100
  12.         x: 50
  13.         y: 50
  14.         color: "#53d769"
  15.         border.color: Qt.lighter(color, 1.1)
  16.         Text {
  17.             anchors.centerIn: parent
  18.             text: Math.round(parent.x) + '/' + Math.round(parent.y)
  19.         }
  20.         MouseArea {
  21.             anchors.fill: parent
  22.             drag.target: parent
  23.         }
  24.     }
  25. }

可以自由的拖动这个矩形。当关闭这个应用程序并再次打开时，这个矩形框仍然在相同的位置。

现在我们将添加矩形的x/y坐标值存储到SQL数据库中。首先我们需要添加一个初始化、读取和保存数据库功能。这些功能在组件构造和组件销毁时被调用。

  1. import QtQuick 2.2
  2. import QtQuick.LocalStorage 2.0
  4. Item {
  5.     // reference to the database object
  6.     property var db;
  8.     function initDatabase() {
  9.         // initialize the database object
  10.     }
  12.     function storeData() {
  13.         // stores data to DB
  14.     }
  16.     function readData() {
  17.         // reads and applies data from DB
  18.     }
  21.     Component.onCompleted: {
  22.         initDatabase();
  23.         readData();
  24.     }
  26.     Component.onDestruction: {
  27.         storeData();
  28.     }
  29. }

你也可以调用已有的JS库提取相关数据库代码来完成所有的逻辑。如果这个逻辑变得更加复杂这将是最好的解决方案。

在数据库初始化函数中，我们创建一个数据库对象并且确保SQL表已经被创建。

  1. function initDatabase() {
  2.     print('initDatabase()')
  3.     db = LocalStorage.openDatabaseSync("CrazyBox", "1.0", "A box who remembers its position", 100000);
  4.     db.transaction( function(tx) {
  5.         print('... create table')
  6.         tx.executeSql('CREATE TABLE IF NOT EXISTS data(name TEXT, value TEXT)');
  7.     });
  8. }

应用程序下一步调用读取函数来读取数据库中已有的数据。这里我们需要区分数据库表中是否已有数据。我们观察有多少条语句返回来检查是否已有数据。

  1. function readData() {
  2.     print('readData()')
  3.     if(!db) { return; }
  4.     db.transaction( function(tx) {
  5.         print('... read crazy object')
  6.         var result = tx.executeSql('select * from data where name="crazy"');
  7.         if(result.rows.length === 1) {
  8.             print('... update crazy geometry')
  9.             // get the value column
  10.             var value = result.rows[0].value;
  11.             // convert to JS object
  12.             var obj = JSON.parse(value)
  13.             // apply to object
  14.             crazy.x = obj.x;
  15.             crazy.y = obj.y;
  16.         }
  17.     });
  18. }

我们希望在将数据作为一个JSON字符串存储在一列值中。这与典型的SQL不同，但是可以很好的与JS代码结合。所以我们将它存储为一个JS对象的可以使用JSON stringif/parse方法的数据替代使用x,y作为属性值放在数据库表中。最后我们获取一个包含x,y属性有效的JS对象，我们可以将它应用在我们疯狂的矩形中。

为了保存数据，我们需要区分更新和插入的情况。当一个记录已经存在时我们使用更新，如果没有记录则将它插入在“crazy”下。

  1. function storeData() {
  2.     print('storeData()')
  3.     if(!db) { return; }
  4.     db.transaction( function(tx) {
  5.         print('... check if a crazy object exists')
  6.         var result = tx.executeSql('SELECT * from data where name = "crazy"');
  7.         // prepare object to be stored as JSON
  8.         var obj = { x: crazy.x, y: crazy.y };
  9.         if(result.rows.length === 1) {// use update
  10.             print('... crazy exists, update it')
  11.             result = tx.executeSql('UPDATE data set value=? where name="crazy"', [JSON.stringify(obj)]);
  12.         } else { // use insert
  13.             print('... crazy does not exists, create it')
  14.             result = tx.executeSql('INSERT INTO data VALUES (?,?)', ['crazy', JSON.stringify(obj)]);
  15.         }
  16.     });
  17. }

替代选择所有记录的设置，我们也可以使用SQLITE计数函数：SELECT COUNT(*) from data where name = “crazy”，将返回使用行选择查询的结果。否则这将是一个通用的SQL代码。所谓额外的特性，我们在查询中使用？绑定SQL值。

现在你可与拖动这个矩形框当你退出应用程序时会将x/y坐标值存储到数据库，下次启动应用程序时矩形框将使用存储的x/y坐标值定位。