更新记录

1.0.1(2025-01-11) 下载此版本

  • 修复未设置过期时间时,自动删除缓存数据的bug。

  • 修复安卓环境获取缓存数据泛型丢失的bug。

  • 新增 checkExpiry 方法,用于检查缓存数据是否过期。同原来的 isExpired.value 一个效果。

    提示

    该方法在缓存数据不存在或者已过期时,返回 true,否则返回 false

  • 新增 clear 方法,用于清除缓存数据。同原来的 setValue(null) 一个效果。

  • 优化其他已知问题。

1.0.0(2024-12-20) 下载此版本

  • 初始版本发布。

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.8,Android:支持,iOS:支持,HarmonyNext:不确定 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
× × × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

kux-apiuse-storage

该插件是官方 数据存储 的封装,支持单独设置有效期以及自动清除过期数据。

插件特色

  • 简洁高效
  • 支持设置有效期
  • 支持自动清除过期数据
  • 支持校验是否过期

基本用法

import { useStorage } from '@/uni_modules/kux-apiuse-storage';

const { setValue, setExpiry, isExpired, data, expiry, refresh } = useStorage<string>('test-version');

// 设置新值
setValue('test');
// 设置有效期,单位毫秒
setExpiry(3000);
// 获取是否过期
console.log(isExpired.value);
// 读取值
console.log(data.value);
// 读取过期时间
console.log(expiry.value);
// 刷新缓存状态
refresh();

API

useStorage

  • 说明:缓存操作函数
  • 类型:useStorage<T>(key: string, extraOptions?: kuxUseStorageExtraOptions<T> | null): KuxUseStorageReturn<T>

useStorage 参数

名称 类型 必填 说明
key string 缓存key
extraOptions kuxUseStorageExtraOptions<T> 额外配置参数

kuxUseStorageExtraOptions 参数

名称 类型 必填 说明
initialValue T | null 默认值
expiry number | null 有效期,单位毫秒
clearExpired boolean 是否自动清除过期数据,默认为 true

useStorage 返回值

getValue

  • 说明:读取缓存值
  • 类型:() => T | null

setValue

  • 说明:设置新值
  • 类型:(newValue: T) => void
  • 注意:如果设置为 null 就是清除缓存。

getExpiry

  • 说明:读取有效期
  • 类型:() => number | null

setExpiry

  • 说明:设置新的有效期
  • 类型:(newExpiry: number | null) => void

expiry

  • 说明:读取有效期,和 getExpiry 同样的效果。
  • 类型:Ref<number | null>

data

  • 说明:读取缓存值,和 getValue 同样的效果。
  • 类型:Ref<T | null>

isExpired

  • 说明:缓存是否过期,如果缓存数据不存在或者已过期,则返回 true,否则返回 false
  • 类型:Ref<boolean>

refresh

  • 说明:刷新缓存状态,用来手动获取最新缓存状态
  • 类型:() => void

setItem

  • 说明:设置新的缓存,支持同时设置值和有效期
  • 类型:(value: T, newExpiry?: number | null) => void
  • 注意:如果设置为 null 就是清除缓存。

checkExpiry

  • 说明:校验是否过期,同 isExpired 效果。
  • 类型:() => boolean

clear

  • 说明:清除缓存
  • 类型:() => void

实战示例

<template>
    <!-- #ifdef APP -->
    <scroll-view style="flex:1">
    <!-- #endif -->
        <view class="flex-col mt-3 px-3">
            <text>缓存值:{{ data }}</text>
            <text class="mt-3">缓存有效期:{{ expiryDate }}</text>
            <text class="mt-3">缓存是否过期:{{ isExpired ? '是' : '否' }}</text>
            <button class="mt-3" type="primary" @tap="setValue('test')">设置新值</button>
            <button class="mt-3" type="primary" @tap="setExpiry3Seconds">设置有效期3秒</button>
            <button class="mt-3" type="primary" @tap="refresh">刷新有效期</button>
        </view>
    <!-- #ifdef APP -->
    </scroll-view>
    <!-- #endif -->
</template>

<script setup>
    import { useStorage } from '@/uni_modules/kux-apiuse-storage';

    const { setValue, setExpiry, isExpired, data, expiry, refresh } = useStorage<string>('test-version', {
        clearExpired: true,
        initialValue: 'hello uts'
    });
    const expiryDate = computed(() => {
        if (expiry.value != null) {
            return new Date(expiry.value!);
        }

        return null;
    })

    const setExpiry3Seconds = () => {
        uni.showModal({
            title: '提示',
            content: '设置后3秒后数据过期',
            showCancel: false,
            success: (res) => {
                if (res.confirm) {
                    setExpiry(3000);
                    setTimeout(() => {
                        refresh();
                    }, 3000);
                }
            }
        })
    };
</script>

<style>

</style>

类型定义

/**
 * interface.uts
 * uts插件接口定义文件,按规范定义接口文件可以在HBuilderX中更好的做到语法提示
 */

export type StorageWithExpiry<T> = {
    value: T;
    expiry: number | null;
}

export type KuxUseStorageReturn<T> = {
    getValue: () => T | null;
    setValue: (newValue: T) => void;
    getExpiry: () => number | null;
    setExpiry: (newExpiry: number | null) => void;
    expiry: Ref<number | null>;
    data: Ref<T | null>;
    isExpired: Ref<boolean>;
    refresh: () => void;
    setItem: (value: T, newExpiry?: number | null) => void;
}

export type kuxUseStorageExtraOptions<T> = {
    initialValue?: T | null;
    expiry?: number | null;
    clearExpired?: boolean;
}

export type KuxUseStorageOptions<T> = {
    key: string;
    initialValue?: T | null;
    expiry?: number | null;
    extraOptions?: kuxUseStorageExtraOptions | null;
}

结语

kux 不生产代码,只做代码的搬运工,致力于提供uts 的 js 生态轮子实现,欢迎各位大佬在插件市场搜索使用 kux 生态插件:https://ext.dcloud.net.cn/search?q=kux

友情推荐

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问