HaaS UI小程式解決方案基礎教學之四： JSAPI資料存儲

名詞解釋

AliOS Things： 阿裡雲智能IoT團隊自研的物聯網作業系統

HaaS：全稱是Hardware as a Service，阿裡雲智能IoT團隊基于AliOS Things系統推出的硬體即服務

HaaS UI：全稱是Hardware as a Service User Interface，是源自AliOS Things作業系統上的一套應用&圖形解決方案，支援C/C++和 JS兩種開發語言

1、Storage JSAPI簡介

Storage JSAPI是HaaS UI提供的一個輕量級資料存儲接口，特别适用于存儲應用的各項資料。

例如在天氣應用中，在某一次使用時使用者添加了若幹個城市，當使用者下一次點開時也希望之前設定的城市會儲存在應用中，以友善直接擷取資訊。又如在屏保設定選項裡，使用者設定了打開屏保，當裝置下次開機時也需要記住使用者的選項，将屏保打開。這時就需要借助于Storage JSAPI，利用它來存儲一些鍵值對(Key-Value)參數。

Storage JSAPI的作用域為目前小程式應用，包含的接口如下：

接口宿主	JSAPI	調用方法	接口功能
storage	setStorage	$falcon.jsapi.storage.setStorage({key: 'key', data: 'data'})	資料存儲
getStorage	$falcon.jsapi.storage.getStorage({key: 'key'})
removeStorage	$falcon.jsapi.storage.removeStorage({key: 'key'})
clearStorage	$falcon.jsapi.storage.clearStorage()

1.1、 setStorage

儲存key-value資料

入參

Object 類型，屬性如下：

屬性	類型	必填	描述
key	String	是	緩存資料的 key。
data			緩存資料的 value。
callback	Function	否	回調函數，包含result參數。

示例代碼

// sync
const storage = $falcon.jsapi.storage;
storage.setStorage({
  key: 'key',                           // key
  data: 'storage content',  // value
}, result => {result && !result.error && console.log('dialog clicked ', result});

// async
const storage = $falcon.jsapi.storage;
let result = await storage.setStorage({
  key: 'key',                           // key
  data: 'storage content',  // value
});
              
result && !result.error && console.log('dialog clicked ', result);           

success 回調函數

1.2、 getStorage

讀取key-value資料

storage.getStorage({
  key: 'key'        // key
}, result => {
    result && !result.error && console.log('dialog clicked ', result);
});           

		key 對應的内容。

1.3、 removeStorage

删除目前小程式指定key所對應的value資料

storage.removeStorage({
  key: 'key'        // key
}, result => {result && !result.error && console.log('dialog clicked ', result);});           

1.4、 clearStorage

清空目前小程式所有的key-value資料

appId			小程式的 appId。

storage.clearStorage({
}, result => {result && !result.error && console.log('dialog clicked ', result);});           

		被清空資料的小程式的 id。

1.5、 getStorageInfo

擷取目前小程式所有的key資料，将傳回所有通過setStorage接口存儲的key資料

storage.getStorageInfo({
}, result => {result && !result.error && console.log('dialog clicked ', result);});           

keys	String Array	目前 storage 中所有的 key。
currentSize	Number	目前占用的空間大小, 機關為 KB。
limitSize		限制的空間大小，機關為 KB。

2、Storage JSAPI使用教程

2.1、 storage對象擷取

在使用Storage JSAPI前，需要先擷取$falcon.jsapi的storage對象，所有的接口都是通過storage對象進行調用的。

const storage = $falcon.jsapi.storage;

2.2 、資料存儲

資料存儲操作需要通過步驟1擷取的storage對象來進行，具體可通過storage.setStorage來實作鍵值對參數的存儲，可存儲的資料類型有Bool、Float、Int、Long、String五種。

資料類型/資料操作	寫入操作
Bool	支援
Float
Int
Long

在進行資料存儲時，有兩種方式，一種是同步存儲，另一種是異步存儲。同步存儲直接傳回存儲結果，異步存儲需要在async函數中操作，通過await傳回存儲結果。

接口名/參數清單	入參1	入參2
	key: 'key'	data: 'storage content'

同步存儲方式：

const storage = $falcon.jsapi.storage;
storage.setStorage({
  key: 'key',               // key
  data: 'storage content',  // value
}, result => {});           

異步存儲方式：

const storage = $falcon.jsapi.storage;
let result = await storage.setStorage({
  key: 'key',               // key
  data: 'storage content',  // value
});
console.log(result);           

2.3、 資料讀取

資料讀取操作也需要通過步驟1擷取的storage對象來進行，具體可通過storage.getStorage來實作鍵值對參數的讀取，可讀取的資料類型有Bool、Float、Int、Long、String五種。

	讀取操作

在進行資料讀取時，也有兩種方式，一種是同步讀取，另一種是異步讀取。同步讀取直接傳回讀取結果，異步讀取需要在async函數中操作，通過await傳回讀取結果。

同步讀取方式：

const storage = $falcon.jsapi.storage;
storage.getStorage({
  key: 'key'    // key
}, result => {
  result && !result.error && console.log('dialog clicked ', result);
});           

異步讀取方式：

const storage = $falcon.jsapi.storage;
let result = await storage.getStorage({
  key: 'key',    // key
});
console.log(result);           

3、Storage JSAPI調用示例

本節将以屏保設定選項為示例，介紹如何去調用Storage JSAPI。屏保設定選項是指使用者是否設定了開啟屏保，使用者在設定了屏保選項後，裝置在下次開機後，應保持使用者的設定，根據使用者的設定預設将屏保打開或關閉。使用者設定了屏保開關的選項後，這個設定參數就可以通過Storage JSAPI存儲到磁盤中，下次裝置開機就會主動去讀取該選項，這樣就做到了使用者設定的持久化。

屏保設定選項

3.1、 屏保設定頁面開發

首先需要開發屏保設定頁面，模闆和

<div class="wrapper">
    <text class="screen" @click="open">屏保開啟</text>
    <FlSwitch
            @change="switchChange"
            :width="100"
            :height="50"
            colorChecked="blue"
            v-model="switchChecked"
    />
  </div>
</template>

<style scoped>
.wrapper {
  justify-content: center;
  align-items: center;
  background-color: #f8f8ff;
}
.screen {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #888;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}
</style>           

3.2、 儲存屏保設定參數

使用者設定的屏保是否開啟的參數可通過Storage JSAPI中的setstorage接口進行儲存，當使用者選擇打開屏保時，将screen-saver參數設定為on，當使用者選擇關閉屏保時，将screen-saver參數設定為off。setstorage設定screen-saver參數的操作在FlSwitch元件的狀态發生改變時進行，FlSwitch元件的狀态通過switchChange函數進行監聽，具體

import FlSwitch from "../../packages/switch/index.vue";
export default {
  name: "index",
  components: {
    FlSwitch,
  },
  data() {
    return {
      msg: "",
    };
  },
  methods: {
    switchChange(on) {
      console.log("switchChange ", on);
      const storage = $falcon.jsapi.storage;
      if(on == true) {
        storage.setStorage({
          key: 'screen-saver',         // key
          data: 'on',                  // value
        }, result => {});
      } else {
        storage.setStorage({
          key: 'screen-saver',         // key
          data: 'off',                 // value
        }, result => {});
      } 
    },
    finishApp() {
      this.$app.finish();
    },
    finishPage() {
      this.$page.finish();
    },
  },
};
</script>           

3.3、 屏保設定效果展示

當使用者設定開啟屏保時，screen-saver的值被置為on；當使用者設定關閉屏保時，screen-saver的值被置為off。

4. 開發者技術支援

如需更多技術支援，可加入釘釘開發者群，或者關注微信公衆号