uniapp获取所有缓存数据

运行

缓存

清空

缓存页面

template

<template>
    <view class="container">
        <view class="loop">
			<view class="cacheInfo">数量：{{keys}},大小：{{currentSize}}，最多：{{limitSize}}</view>
			<view><view class="clearAll" @tap="clearAll">清除所有缓存</view></view>
		</view>
		<view class="list" v-for="(item,index) in list">
			<view class="key">{{item.k}}</view>
			<view class="val"  hover-class="cur" hover-stay-time="1"
			:class="item.hasChange? 'in': ''"
			:data-val="item.v"
			:data-index="index"
			@tap="show($event)">{{item.v}}</view>
		</view>
		<view class="content">
			{{content}}
		</view>
    </view>
</template>

script

import cache from '../../common/cache.js';
export default {
    data() {
        return {
			keys:0,
			currentSize:0,
			limitSize:0,
			list:[
				{hasChange:false}
			],
			content:"",
        };
    },
    components:{
        
    },
    onLoad(e) {
		
		
		this.allgetkey();
		
		
    },
	onShow(){
		this.allgetkey(); 
	},
    methods:{
		allgetkey(){
			const res = uni.getStorageInfoSync();
			 
			this.keys = res.keys.length;
			this.currentSize = res.currentSize;
			this.limitSize = res.limitSize;
			
			let list = [];
			var str = res.keys;
			str.forEach((item,index)=>{
				list.push({"k":item,"v":cache.getCache(item)})
			});
			
			this.list = list;
		},
		show(e){
			var list = this.list;
			list.forEach((item,index)=>{
				this.list[index].hasChange = false;
			});
			var val = e.currentTarget.dataset.val;
			this.content = val;
			
			var index = e.currentTarget.dataset.index;
			this.list[index].hasChange = true;
		},
		clearAll(){
			uni.showToast({
				title:"缓存清除成功!",
			})
			cache.clearCache();//清除缓存
			
			this.keys = 0;
			this.list = "";
		}
    }
}

style

.container{padding: 20upx 34upx;}
.loop{display: flex; justify-content: space-between; margin-bottom: 20upx; border-bottom: 1px solid #eee; padding-bottom: 20upx;}
.loop view{width: 50%;}
.loop .cacheInfo{font-size: 24upx; color: #666; padding: 15upx 0;}
.loop .clearAll{ font-size: 24upx; background: #11AB2F; color: #fff; text-align: center; padding: 0 20upx; 
border-radius: 5upx; line-height: 66upx; display: block; float: right; margin-top: 10upx;}
.list{display: flex;justify-content: flex-start; margin-bottom: 10upx; border-bottom: 1px solid #EEEEEE;}
.list view{ width: 50%; font-size: 24upx; color: #666; padding: 15upx 0; overflow: hidden;}
.list .key{border-right: 1px solid #eee; }
.list .val{padding-left: 10upx;}
.list .val.cur{ color:#E02020;}
.list .val.in{ color: #E02020;}
.content{word-break:break-all;}

设置

script

cache.setCache("name","小坏蛋");