更新记录
0.0.1(2023-02-24)
下载此版本
- 基于 setStorageSync 和 getStorageSync
- 对存储数据,支持设置 expires
- 对于其它注意事项
https://uniapp.dcloud.net.cn/api/storage/storage.html#clearstoragesync
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 app-vue app-nvue |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
u-store
u-store
基于 uni.setStorageSync
和 uni.getStorageSync
封装的,在 App
开发过程中,经常通过缓存模块数据来提升用户体验,某些场景甚至需要对缓存数据设置过期时间。
为了减少重复工作量,📦封装该插件。
1. 安装插件
2. 使用
<template>
<view class="content">
<view>推荐打开控制台根据不同的操作,观察 Local Storage 的变化</view>
<view class="oper">
<button type="primary" @click="set">Storage.set 设置</button>
<button type="primary" @click="setExpires"> Storage.set 设置过期时间</button>
<button type="primary" @click="get">Storage.get 获取</button>
<button type="primary" @click="remove">Storage.remove 移除</button>
<button type="primary" @click="removeAll"> Storage.removeAll 移除所有 Key</button>
<button type="primary" @click="allKey">Storage.getAllKeys 获取所有的 Key</button>
<button type="primary" @click="checkKey"> Storage.hasKey 检查 Key 是否存在</button>
</view>
<view class="text-area">
{{ title }}
</view>
<view class="text-area">
{{ keys.length ? keys : "" }}
</view>
</view>
</template>
<script>
import Storage from '@/uni_modules/u-store/js_sdk/Storage.js'; // 引入
export default {
data() {
return {
title: '',
keys: []
}
},
methods: {
set(){
Storage.set("test", "hello");
this.get();
},
setExpires(){
Storage.set("test", "hello", 3000);
this.get();
},
get(){
this.title = Storage.get("test");
},
remove(){
Storage.remove("test");
this.allKey();
this.get();
},
removeAll(){
Storage.removeAll();
this.allKey();
this.get();
},
allKey(){
this.keys = Storage.getAllKeys();
},
checkKey(){
uni.showToast({
title: Storage.hasKey('test') ? "存在" : "不存在",
icon: "none"
})
}
}
}
</script>
<style>
page {
padding: 20rpx;
}
.oper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.oper button {
margin-bottom: 20rpx;
}
.text-area {
padding: 30rpx;
}
</style>
3. API
方法 |
描述 |
返回 |
set(key, data, expires?) |
将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容。 同时支持指定 expires 设置 key 过期时间,单位为秒 |
void |
get(key) |
获取指定 key 的数据 |
Object |
remove(key) |
移除 |
void |
removeAll() |
移除中所有数据 |
void |
getAllKeys() |
获取所有的 key |
Array |
hasKey |
检查是否包含指定的 key |
boolean |