useStorage

数据缓存(全部选择异步函数的原因是为了支持RN)

何时使用

当需持久化数据时

API

const [storageInfo, { set, get, remove }] = useStorage();

参数说明

无

返回值说明

返回值	说明	类型
storageInfo	缓存相关信息	{keys: string[]; storage: { [_: string]: any };currentSize: number;limitSize: number;}
set	设置缓存	(key: string, data: any) => Promise<TaroGeneral.CallbackResult>
get	获取缓存	(key?: string) => Promise<TaroGeneral.CallbackResult> 若不指定key, 则默认获取所有
remove	移除/清除缓存	(key?: string) => Promise<TaroGeneral.CallbackResult> 若不指定key, 则默认移除所有

代码演示

React

basic/useStorage/index

import React from 'react';
import DemoContent from '@src/components/DemoContent';
import { Cell, Button } from '@taroify/core';
import { useStorage, useToast } from 'taro-hooks';
import { escapeState } from '@taro-hooks/shared';
import Mock from 'mockjs';

export default () => {
  const [storageInfo, { set, get, remove }] = useStorage();
  const { show } = useToast({ mask: true, title: '操作成功' });

  const handleAdd = () => {
    set<string>(Mock.Random.word(), Mock.Random.name()).then(() => {
      show();
    });
  };

  const generateKey = () => {
    const randomIndex = Math.max(
      Math.ceil(Math.random() * escapeState(storageInfo).keys.length),
      escapeState(storageInfo).keys.length - 1,
    );
    return escapeState(storageInfo).keys[randomIndex];
  };

  const handleGet = () => {
    get<string>(generateKey()).then((res) => {
      show({ title: (res as string) ?? '获取失败' });
    });
  };

  const handleRemove = () => {
    remove(generateKey()).then(() => show());
  };

  return (
    <DemoContent>
      <Button className="gap" block onClick={handleAdd}>
        随机设置缓存！
      </Button>
      <Button className="gap" block onClick={handleGet}>
        随机获取缓存！
      </Button>
      <Button className="gap" color="danger" block onClick={handleRemove}>
        随机移除缓存！
      </Button>
      <Cell.Group clickable title="当前缓存个数">
        <Cell title="缓存占用" brief={String(storageInfo.currentSize)}></Cell>
        <Cell title="缓存限制" brief={String(storageInfo.limitSize)}></Cell>
        <Cell
          title="当前缓存数量"
          brief={String(storageInfo.keys?.length)}
        ></Cell>
        <Cell title="分别为:"></Cell>
        {Object.entries(storageInfo.storage).map(([key, value]) => (
          <Cell key={key} title={key} brief={JSON.stringify(value)}></Cell>
        ))}
      </Cell.Group>
    </DemoContent>
  );
};

Vue

basic/useStorage/index

<template>
  <demo-content>
    <nut-button
      class="gap"
      shape="square"
      type="primary"
      block
      @click="handleAdd()"
      >随机设置缓存!</nut-button
    >
    <nut-button
      class="gap"
      shape="square"
      type="primary"
      block
      @click="handleGet()"
      >随机获取缓存!</nut-button
    >
    <nut-button
      class="gap"
      shape="square"
      type="danger"
      block
      @click="handleRemove()"
      >随机移除缓存!</nut-button
    >
    <nut-cell-group title="当前缓存个数">
      <nut-cell
        title="缓存占用"
        :sub-title="String(storageInfo.currentSize)"
      ></nut-cell>
      <nut-cell
        title="缓存限制"
        :sub-title="String(storageInfo.limitSize)"
      ></nut-cell>
      <nut-cell
        title="当前缓存数量"
        :sub-title="String(storageInfo.keys?.length)"
      ></nut-cell>
      <nut-cell title="分别为:"></nut-cell>
      <nut-cell
        v-for="(value, key) in storageInfo.storage"
        :key="key"
        :title="key"
        :sub-title="$filters.stringify(value)"
      ></nut-cell>
    </nut-cell-group>
  </demo-content>
</template>

<script setup lang="ts">
import { useStorage, useToast } from 'taro-hooks';
import { escapeState } from '@taro-hooks/shared';
import Mock from 'mockjs';

const [storageInfo, { set, get, remove }] = useStorage();
const { show } = useToast({ mask: true, title: '操作成功' });

const handleAdd = () => {
  set<string>(Mock.Random.word(), Mock.Random.name()).then(() => {
    show();
  });
};

const generateKey = () => {
  const randomIndex = Math.max(
    Math.ceil(Math.random() * escapeState(storageInfo).keys.length),
    escapeState(storageInfo).keys.length - 1,
  );
  return escapeState(storageInfo).keys[randomIndex];
};

const handleGet = () => {
  get<string>(generateKey()).then((res) => {
    show({ title: res ?? '获取失败' });
  });
};

const handleRemove = () => {
  remove(generateKey()).then(() => show());
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️	✔️	✔️