键值对存储 useKeyValueStorage

更新: 2025/1/8 字数: 0 字 时长: 0 分钟

基础使用

useKeyValueStorage用于原生的轻量级的键值对存储，类似于localStorage。

存值

spSetKey用于设置键值对，需传入key和value，value需为string或number类型。

import { useKeyValueStorage } from "@/hooks";
const { spSetKey } = useKeyValueStorage();

点击查看示例代码

<script setup lang="ts">
import { useKeyValueStorage } from "@/hooks";
const { spSetKey } = useKeyValueStorage();
const info = ref({
  key: "",
  value: "",
});
</script>
<template>
  <div>
    <van-field v-model="info.key" label="键" placeholder="请输入键" />
    <van-field
      v-model="info.value"
      type="number"
      label="值"
      placeholder="请输入值"
    />
    <div class="mt-10">
      <van-button
        type="primary"
        class="mr-10"
        @click="spSetKey(info.key, info.value)"
      >
        存值
      </van-button>
    </div>
  </div>
</template>

取值

spGetKey用于获取键值对，需传入key，返回的值存在result里，为string类型。

import { useKeyValueStorage } from "@/hooks";
const { result, spSetKey } = useKeyValueStorage();

点击查看示例代码

<script setup lang="ts">
import { useKeyValueStorage } from "@/hooks";
const { spSetKey } = useKeyValueStorage();
const info = ref({
  key: "",
  value: "",
});
</script>
<template>
  <div>
    <van-field v-model="info.key" label="键" placeholder="请输入键" />
    <van-field
      v-model="info.value"
      type="number"
      label="值"
      placeholder="请输入值"
    />
    <div class="mt-10">
      <van-button @click="spGetKey(info.key)"> 取值 </van-button>
    </div>
    <div>
      <h4>取值:</h4>
      <p>{{ result }}</p>
    </div>
  </div>
</template>

API

返回值、方法

返回值、方法	说明	类型
result	取值结果	string
spSetKey	设置键值对	(key: string, value: string | number) => void
spGetKey	获取键值对	(key: string) => void