虎牙开放平台文档

KV存储

本章节介绍虎牙小程序的KV存储，每个小程序都可以有自己的本地缓存。

开发者可以使用小程序基础库中的hyExt.storage方法对象对本地缓存进行读写和清理：

设置小程序简易存储键值对（hyExt.storage.setItem）
获取小程序简易存储键值对（hyExt.storage.getItem）
获取小程序简易存储的键集合（hyExt.storage.getKeys）
移除小程序简易存储键值对（hyExt.storage.removeItem）

下面我们将会创建一个示例小程序来体验KV存储的基本使用。

准备工作

参考创建小程序项目，初始化一个小程序项目，其中小程序类型选择：

虎牙直播主站-面板
虎牙直播APP-面板
PC主播端-面板

参考创建小程序，创建一个小程序和创建一个开发版本。

新增示例组件

在viewer观众端新增viewer/common.js和viewer/common.hycss两个文件

新增viewer/common.js：

import React, { useState, useEffect } from "react";
import { UI } from "@hyext/hy-ui";
import "./common.hycss";
const { View, Text, Button, Input } = UI;

export const Example = () => {
  const [getValue, setGetValue] = useState("");
  const [result, setResult] = useState("暂无数据");

  const handleGetItem = () => {
    hyExt.storage
      .getItem(getValue)
      .then((value) => {
        setResult(getValue + "获取成功，值为：" + value);
        setResult(`获取成功，{"${getValue}":"${value}"}`);
      })
      .catch((err) => {
        setResult(getValue + "获取失败");
      });
  };

  return (
    <View className="container">
      <View className="section">
        <Text className="title">storage.getItem</Text>
        <View className="item">
          <Text className="inputText">key</Text>
          <Input
            className="input"
            blurOnSubmit={false}
            placeholder="存储的key"
            value={getValue}
            onChange={(v) => setGetValue(v)}
          />
        </View>
        <Button className="button" onPress={() => handleGetItem()}>
          调用
        </Button>
      </View>
      <View className="section">
        <Text className="title">调用结果</Text>
        <Text>{result}</Text>
      </View>
    </View>
  );
};

新增viewer/common.hycss：

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.section {
  background-color: white;
  padding: 10px;
  width: 650px;
}
.title {
  font-weight: bold;
  margin-bottom: 5px;
}
.item {
  flex-direction: row;
  margin-bottom: 5;
}
.inputText {
  width: 80px;
}
.input {
  margin-left: 180px;
  width: 200px;
}
.button {
  height: 80px;
  width: 600px;
  background-color: #ff9600;
  border-radius: 10px;
}

在streamer观众端新增streamer/common.js和streamer/common.hycss两个文件

新增streamer/common.js：

import React, { useState, useEffect } from "react";
import { UI } from "@hyext/hy-ui";
import "./common.hycss";
const { View, Text, Button, Input } = UI;

export const Example = () => {
  const [storageKey, setStorageKey] = useState("");
  const [storageValue, setStorageValue] = useState("");
  const [getValue, setGetValue] = useState("");
  const [removeKey, setRemoveKey] = useState("");
  const [keys, setKeys] = useState("暂无数据");
  const [result, setResult] = useState("暂无数据");

  useEffect(() => {
    // 获取小程序简易存储的键集合
    hyExt.storage
      .getKeys()
      .then((key) => {
        setKeys(key == [] ? "暂无数据" : key?.join("，"));
      })
      .catch((err) => {
        setKeys("获取失败");
      });
  }, [result]);
  // 设置小程序简易存储键值对
  const handleSetItem = () => {
    hyExt.storage
      .setItem(storageKey, storageValue)
      .then(() => {
        setResult(storageKey + "设置成功");
      })
      .catch((err) => {
        setResult(storageKey + "设置失败，key不能为number类型。");
      });
  };
  // 移除小程序简易存储键值对
  const handleRemoveItem = () => {
    hyExt.storage
      .removeItem(removeKey)
      .then(() => {
        setResult(removeKey + "移除成功");
      })
      .catch((err) => {
        setResult(removeKey + "移除失败");
      });
  };
  // 获取小程序简易存储键值对
  const handleGetItem = () => {
    hyExt.storage
      .getItem(getValue)
      .then((value) => {
        setResult(getValue + "获取成功，值为：" + value);
        setResult(`获取成功，{"${getValue}":"${value}"}`);
      })
      .catch((err) => {
        setResult(getValue + "获取失败");
      });
  };

  return (
    <View className="container">
      <View className="section">
        <Text className="title">storage.setItem</Text>
        <View className="item">
          <Text className="inputText">key</Text>
          <Input
            className="input"
            blurOnSubmit={false}
            placeholder="存储的key"
            value={storageKey}
            onChange={(v) => setStorageKey(v)}
          />
        </View>
        <View className="item">
          <Text className="inputText">value</Text>
          <Input
            className="input"
            blurOnSubmit={false}
            placeholder="存储的值"
            value={storageValue}
            onChange={(v) => setStorageValue(v)}
          />
        </View>
        <Button className="button" onPress={() => handleSetItem()}>
          调用
        </Button>
      </View>
      <View className="section">
        <Text className="title">storage.removeItem</Text>
        <View className="item">
          <Text className="inputText">key</Text>
          <Input
            className="input"
            blurOnSubmit={false}
            placeholder="存储的key"
            value={removeKey}
            onChange={(v) => setRemoveKey(v)}
          />
        </View>
        <Button className="button" onPress={() => handleRemoveItem()}>
          调用
        </Button>
      </View>
      <View className="section">
        <Text className="title">storage.getItem</Text>
        <View className="item">
          <Text className="inputText">key</Text>
          <Input
            className="input"
            blurOnSubmit={false}
            placeholder="存储的key"
            value={getValue}
            onChange={(v) => setGetValue(v)}
          />
        </View>
        <Button className="button" onPress={() => handleGetItem()}>
          调用
        </Button>
      </View>
      <View className="section">
        <Text className="title">存储的键集合</Text>
        <Text>{keys == [] ? "暂无数据" : keys }</Text>
      </View>
      <View className="section">
        <Text className="title">调用结果</Text>
        <Text>{result}</Text>
      </View>
    </View>
  );
};

新增streamer/common.hycss：

.container {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.section {
  padding: 10px;
  width: 650px;
  background-color: white;
}
.title {
  font-weight: bold;
  margin-bottom: 5px;
}
.item {
  flex-direction: row;
  margin-bottom: 5;
}
.inputText {
  width: 80px;
}
.input {
  margin-left: 180px;
  width: 200px;
}
.button {
  height: 80px;
  width: 600px;
  background-color: #ff9600;
  border-radius: 10px;
}

其中：

viewer/common.js使用React.useState()记录 getValue（getItem存储的key）、result（调用的结果）
streamer/common.js使用React.useState()记录 storageKey（setItem存储的key）、storageValue（setItem存储的值）、getValue（getItem存储的key）、removeKey（removeItem存储的key）、keys（获取的键集合）、result（调用的结果）
使用React.useEffect() 调用hyExt.storage.getKeys() 自动更新 keys（获取的键集合）

在直播间中预览

参考在直播间预览的方式，运行npm start，启动开发服务，在直播间添加并打开开发版小程序，预览如下：

PC主播端
虎牙主站

虎牙APP

注意事项

主播端（PC主播端、助手端）具有KV存储所有相关SDK的权限，观众端（虎牙主站、PC观众端、虎牙APP）只具有获取小程序简易存储键值对（hyExt.storage.getItem）SDK的权限，具体适用终端可查看对应的SDK说明；
设置小程序简易存储键值对（hyExt.storage.setItem）时，输入key的值必须为string类型。

KV存储

准备工作

新增示例组件

在直播间中预览

注意事项

相关链接