名词解释

AliOS Things： 阿里云智能IoT团队自研的物联网操作系统

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

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的作用域为当前小程序应用，包含的接口如下：

1.1、 setStorage

保存key-value数据

入参

Object 类型，属性如下：

示例代码

// 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数据

入参

Object 类型，属性如下：

示例代码

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

success 回调函数

1.3、 removeStorage

删除当前小程序指定key所对应的value数据

入参

Object 类型，属性如下：

示例代码

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

success 回调函数

1.4、 clearStorage

清空当前小程序所有的key-value数据

入参

Object 类型，属性如下：

示例代码

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

success 回调函数

1.5、 getStorageInfo

获取当前小程序所有的key数据，将返回所有通过setStorage接口存储的key数据

入参

Object 类型，属性如下：

示例代码

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

success 回调函数

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五种。

在进行数据存储时，有两种方式，一种是同步存储，另一种是异步存储。同步存储直接返回存储结果，异步存储需要在async函数中操作，通过await返回存储结果。

同步存储方式：

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. 开发者技术支持

如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)