基于uniapp開發(fā)的聊天項目，需要打包為H5、andriod、ios，緩存要求跟android/ios
對齊，由于sessionStorage/localStorage存儲量較小，無法滿足需求，因此選擇基于map實現(xiàn)自定義存儲。
滿足可以自定義分區(qū)名稱和分區(qū)大小
新建cache文件

class Cache {
  constructor() {
    this.cacheMap = new Map();
  }

  /**
   * 創(chuàng)建一個分區(qū)
   * @param {string} regionName - 分區(qū)名稱
   * @param {number} regionSize - 分區(qū)容量（字節(jié)）
   * @param {function} callback - 回調(diào)函數(shù)
   */
  region(regionName, regionSize, callback) {
    this.cacheMap.set(regionName, {
      size: regionSize,
      data: new Map(),
      order: [],
    });
    callback();
  }

  /**
   * 獲取指定分區(qū)中指定鍵的數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   * @param {string} key - 鍵
   * @param {function} callback - 回調(diào)函數(shù)，接收獲取到的值作為參數(shù)
   */
  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);
  }

  /**
   * 存儲指定分區(qū)中的數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   * @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);
    }

    // 添加新數(shù)據(jù)
    region.data.set(key, value);
    region.order.push(key);
    return callback(true)
  }

  /**
   * 移除指定分區(qū)中的指定鍵的數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   * @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);
  }

  /**
   * 批量獲取指定分區(qū)中的數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   * @param {string[]} keys - 鍵數(shù)組
   * @param {function} callback - 回調(diào)函數(shù)，接收獲取到的值數(shù)組作為參數(shù)
   */
  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);
  }

  /**
   * 批量移除指定分區(qū)中的數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   * @param {string[]} keys - 鍵數(shù)組
   */
  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)
  }

  /**
   * 清除指定分區(qū)的緩存數(shù)據(jù)
   * @param {string} regionName - 分區(qū)名稱
   */
  clean(regionName, callback) {
    const region = this.cacheMap.get(regionName);
    if (!region) {
      return callback(true);
    }

    region.data.clear();
    region.order = [];
    return callback(true)
  }

  /**
   * 清除所有緩存數(shù)據(jù)
   */
  clearAll(callback) {
    this.cacheMap.clear();
    return callback(true)
  }
}

export default Cache;


/* // 示例用法
const cache = new Cache();
cache.region("region1", 100, () => {
  // 創(chuàng)建一個名為 "region1"，容量為 100 字節(jié)的分區(qū)
  cache.set("region1", "key1", "value1"); // 存儲數(shù)據(jù)
  cache.set("region1", "key2", "value2");
  cache.set("region1", "key3", "value3");

  cache.get("region1", "key1", (resp) => {
    console.log(resp); // 輸出: "value1"
  });

  cache.remove("region1", "key2"); // 移除數(shù)據(jù)

  cache.getMore("region1", ["key1", "key3"], (resp) => {
    console.log(resp); // 輸出: ["value1", "value3"]
  });

  cache.clean("region1"); // 清除分區(qū)數(shù)據(jù)

  cache.clearAll(); // 清除所有緩存
}); */

readme.md文件

## 緩存功能 
 
這是一個基于 JavaScript 的緩存功能實現(xiàn)，適用于 uni-app。
它提供了存儲大量不同數(shù)據(jù)、增刪改查、批量獲取數(shù)據(jù)、批量移除數(shù)據(jù)等功能，并支持對緩存進行分區(qū)管理。 
數(shù)據(jù)容量達到分區(qū)容量時采用先進先出的逐出策略。
 
### 使用方法 
 
1. 在項目中創(chuàng)建一個緩存實例并將其掛載到 Vue 原型上：
main.js
import Vue from 'vue';
import Cache from '@/utils/cache.js';

const cache = new Cache();
Vue.prototype.$cache = cache;
2. 在需要使用緩存功能的組件中，可以通過  this.$cache  訪問緩存實例，并調(diào)用相關(guān)方法進行數(shù)據(jù)存儲、獲取和管理。

export default {
  methods: {
    createRegion() {
      this.$cache.region('region1', 100, () => {
        console.log('分區(qū)創(chuàng)建成功');
      });
    },
    setData() {
      this.$cache.set('region1', 'key1', 'value1');
      this.$cache.set('region1', 'key2', 'value2');
      console.log('數(shù)據(jù)存儲成功');
    },
    getData() {
      this.$cache.get('region1', 'key1', (resp) => {
        console.log('獲取到的數(shù)據(jù):', resp);
      });
    },
  },
};
### 方法說明 
 
-  region(regionName, regionSize, callback) : 初始化、創(chuàng)建一個分區(qū)。 
-  get(regionName, key, callback) : 獲取指定分區(qū)中指定鍵的數(shù)據(jù)。 
-  set(regionName, key, value, callback) : 存儲指定分區(qū)中的數(shù)據(jù)。 
-  remove(regionName, key, callback) : 移除指定分區(qū)中的指定鍵的數(shù)據(jù)。 
-  getMore(regionName, keys, callback) : 批量獲取指定分區(qū)中的數(shù)據(jù)。 
-  removeMore(regionName, keys, callback) : 批量移除指定分區(qū)中的數(shù)據(jù)。 
-  clean(regionName, callback) : 清除指定分區(qū)的緩存數(shù)據(jù)。 
-  clearAll(callback) : 清除所有緩存數(shù)據(jù)。 
 
請根據(jù)您的需求調(diào)用適當(dāng)?shù)姆椒?，以實現(xiàn)緩存功能。 
 
### 注意事項 
 
- 請確保在使用緩存功能之前，已經(jīng)創(chuàng)建了相應(yīng)的分區(qū)。 
- 可以根據(jù)實際需求，調(diào)整分區(qū)的容量大小。 
- 在移除數(shù)據(jù)時，如果指定的鍵不存在，將不會產(chǎn)生任何影響。 
- 在批量操作中，如果指定的鍵不存在，將會被忽略。 
- 請根據(jù)具體業(yè)務(wù)場景，在數(shù)據(jù)存儲達到容量限制時，選擇合適的策略進行數(shù)據(jù)刪除。 
 
以上是一個簡單的緩存功能實現(xiàn)，您可以根據(jù)自己的需求進行擴展和適配。如有任何疑問，請隨時提問。