基于uniapp开发的聊天项目，需要打包为H5、andriod、ios，缓存要求跟android/ios
对齐，由于sessionStorage/localStorage存储量较小，无法满足需求，因此选择基于map实现自定义存储。
满足可以自定义分区名称和分区大小
新建cache文件
class Cache {
constructor() {
this.cacheMap = new Map();
}
/**
* 创建一个分区
* @param {string} regionName - 分区名称
* @param {number} regionSize - 分区容量（字节）
* @param {function} callback - 回调函数
*/
region(regionName, regionSize, callback) {
this.cacheMap.set(regionName, {
size: regionSize,
data: new Map(),
order: [],
});
callback();
}
/**
* 获取指定分区中指定键的数据
* @param {string} regionName - 分区名称
* @param {string} key - 键
* @param {function} callback - 回调函数，接收获取到的值作为参数
*/
get(regionName, key, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback(null);
}
const value = region.data.get(key);
if (value) {
// 更新访问顺序
const index = region.order.indexOf(key);
region.order.splice(index, 1);
region.order.push(key);
}
callback(value);
}
/**
* 存储指定分区中的数据
* @param {string} regionName - 分区名称
* @param {string} key - 键
* @param {*} value - 值
*/
set(regionName, key, value, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback(false);
}
// 判断容量是否达到限制
if (region.data.size >= region.size) {
const oldestKey = region.order.shift();
region.data.delete(oldestKey);
}
// 添加新数据
region.data.set(key, value);
region.order.push(key);
return callback(true)
}
/**
* 移除指定分区中的指定键的数据
* @param {string} regionName - 分区名称
* @param {string} key - 键
*/
remove(regionName, key, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback(false);
}
region.data.delete(key);
const index = region.order.indexOf(key);
if (index !== -1) {
region.order.splice(index, 1);
}
return callback(true);
}
/**
* 批量获取指定分区中的数据
* @param {string} regionName - 分区名称
* @param {string[]} keys - 键数组
* @param {function} callback - 回调函数，接收获取到的值数组作为参数
*/
getMore(regionName, keys, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback([]);
}
const values = keys.map((key) => region.data.get(key));
callback(values);
}
/**
* 批量移除指定分区中的数据
* @param {string} regionName - 分区名称
* @param {string[]} keys - 键数组
*/
removeMore(regionName, keys, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback(false);
}
keys.forEach((key) => {
region.data.delete(key);
const index = region.order.indexOf(key);
if (index !== -1) {
region.order.splice(index, 1);
}
});
return (true)
}
/**
* 清除指定分区的缓存数据
* @param {string} regionName - 分区名称
*/
clean(regionName, callback) {
const region = this.cacheMap.get(regionName);
if (!region) {
return callback(true);
}
region.data.clear();
region.order = [];
return callback(true)
}
/**
* 清除所有缓存数据
*/
clearAll(callback) {
this.cacheMap.clear();
return callback(true)
}
}
export default Cache;
/* // 示例用法
const cache = new Cache();
cache.region("region1", 100, () => {
// 创建一个名为 "region1"，容量为 100 字节的分区
cache.set("region1", "key1", "value1"); // 存储数据
cache.set("region1", "key2", "value2");
cache.set("region1", "key3", "value3");
cache.get("region1", "key1", (resp) => {
console.log(resp); // 输出: "value1"
});
cache.remove("region1", "key2"); // 移除数据
cache.getMore("region1", ["key1", "key3"], (resp) => {
console.log(resp); // 输出: ["value1", "value3"]
});
cache.clean("region1"); // 清除分区数据
cache.clearAll(); // 清除所有缓存
}); */
readme.md文件
## 缓存功能
这是一个基于 JavaScript 的缓存功能实现，适用于 uni-app。
它提供了存储大量不同数据、增删改查、批量获取数据、批量移除数据等功能，并支持对缓存进行分区管理。
数据容量达到分区容量时采用先进先出的逐出策略。
### 使用方法
1. 在项目中创建一个缓存实例并将其挂载到 Vue 原型上：
main.js
import Vue from 'vue';
import Cache from '@/utils/cache.js';
const cache = new Cache();
Vue.prototype.$cache = cache;
2. 在需要使用缓存功能的组件中，可以通过 this.$cache 访问缓存实例，并调用相关方法进行数据存储、获取和管理。
export default {
methods: {
createRegion() {
this.$cache.region('region1', 100, () => {
console.log('分区创建成功');
});
},
setData() {
this.$cache.set('region1', 'key1', 'value1');
this.$cache.set('region1', 'key2', 'value2');
console.log('数据存储成功');
},
getData() {
this.$cache.get('region1', 'key1', (resp) => {
console.log('获取到的数据:', resp);
});
},
},
};
### 方法说明
- region(regionName, regionSize, callback) : 初始化、创建一个分区。
- get(regionName, key, callback) : 获取指定分区中指定键的数据。
- set(regionName, key, value, callback) : 存储指定分区中的数据。
- remove(regionName, key, callback) : 移除指定分区中的指定键的数据。
- getMore(regionName, keys, callback) : 批量获取指定分区中的数据。
- removeMore(regionName, keys, callback) : 批量移除指定分区中的数据。
- clean(regionName, callback) : 清除指定分区的缓存数据。
- clearAll(callback) : 清除所有缓存数据。
请根据您的需求调用适当的方法，以实现缓存功能。
### 注意事项
- 请确保在使用缓存功能之前，已经创建了相应的分区。
- 可以根据实际需求，调整分区的容量大小。
- 在移除数据时，如果指定的键不存在，将不会产生任何影响。
- 在批量操作中，如果指定的键不存在，将会被忽略。
- 请根据具体业务场景，在数据存储达到容量限制时，选择合适的策略进行数据删除。
以上是一个简单的缓存功能实现，您可以根据自己的需求进行扩展和适配。如有任何疑问，请随时提问。
