uniapp 基于uni.setStorageSync综合封装一个可用于cookie存储和storage存储的方法

终版:cache.js

/**
 * 存储数据
 * key: 缓存的键名,必填
 * value: 缓存的值,选填
 * 
 * when: 缓存的过期时间,选填:
 *    【1】传入具体秒数时(单位必须为秒),到期后清除;
 *    【2】传入单词 forever时,永不清除;
 *    【3】传其他值或不传值时,App关闭时清除;
 */
function set(key, value, when) {
  if (!key) { // 如果key为空,直接返回
    console.log("key不能空");
    return;
  }

  const valueObj = {
    value: value,
    storageExpire: '',
  }
  if (when == 'forever') { //永久存储
    valueObj.storageExpire = 'forever';
  } else if (!isNaN(Number.parseFloat(when))) { //规定时间后过期
    const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒
    valueObj.storageExpire = timestamp + Number.parseFloat(when)
  } else { //临时存储-App关闭后过期
    valueObj.storageExpire = 'temporary'
  }

  uni.setStorageSync(key, valueObj);
}

/**
 * 获取数据
 * key: 缓存的键名,必填
 */
function get(key) {
  if (!key) { // 如果key为空,直接返回
    console.log("key不能空");
    return;
  }

  const res = uni.getStorageSync(key) || '';
  const when = res?.storageExpire || '';
  let final = ''
  if (when == 'forever') { //永久存储
    final = res?.value || ''
  } else if (!isNaN(Number.parseFloat(when))) { //规定时间后过期
    const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒
    if (timestamp >= Number.parseFloat(when)) { //已过期
      remove(key);
      final = ''
    } else { //未过期
      final = res?.value || ''
    }
  } else if (when == 'temporary') { //临时存储
    final = res?.value || ''
  } else { //其他情况(例如获取通过uni.seStorageSync存储的值)
    final = res || ''
  }

  return final
}

/**
 * 移除数据
 * key: 缓存的键名,必填
 */
function remove(key) {
  if (!key) { // 如果key为空,直接返回
    console.log("key不能空");
    return;
  }

  uni.removeStorageSync(key);
}

/**
 * 移除所有临时数据(此方法需要在App.vue里调用)
 */
function removeAllTempData() {
  const list = uni.getStorageInfoSync().keys || []
  for (let item of list) {
    let res = uni.getStorageSync(item) || ''
    if (res?.storageExpire == 'temporary') { //判断是否为临时数据
      remove(item)
    }
  }
}


export default {
  set,
  get,
  remove,
  removeAllTempData,
}

如何使用

<script>
  import handleCache from "@/utils/cache/cache.js" //先引入方法
  //【注意】虽然基于uni.setStorageSync等方法改写,但是由于数据结构不同,原生存储API与handleCache方法最好不要混用

  // 规定时间后过期
  handleCache.set('a', { s1: { b1: 6, b2: 8 }, s2: 9 }, 10) //可直接存储对象等,无需转格式
  handleCache.set('a', '时效', 10) //10秒后过期
  handleCache.set('a', '时效', 3600 * 24 * 7) //7天后过期

  // 永久存储
  handleCache.set('b', '永久', 'forever')

  // 临时存储-App关闭时清除
  handleCache.set('c', '临时') //可以不传值
  handleCache.set('c', '临时', 'abcde') //可以是NaN(Not a Number非数)的任意值

  handleCache.get('a') //获取某个数据数据
  handleCache.remove('a') //移除某个数据

  // 在App.vue里的
  //   import handleCache from "@/utils/cache/cache.js"
  //   export default {
  //     onLaunch() {
  //       handleCache.removeAllTempData() //移除所有临时数据
  //     },
  //   }
</script>

附 原始版本(仅参考用)

// 缓存函数,设置或获取缓存值,带有过期时间戳
function cache(key, value, seconds) {
  // key: 缓存的键名,必填
  // value: 缓存的值,选填,如果为空则表示获取缓存,如果不为空则表示设置缓存
  // seconds: 缓存的过期时间,选填,单位为秒,默认为28天

  // 如果key为空,直接返回
  if (!key) {
    // console.log("key不能空");
    return;
  }

  // 获取当前时间戳,单位为秒
  const timestamp = Date.parse(new Date()) / 1000;
  // console.log(`${timestamp}===${key}`);

  // 如果value为空,表示获取缓存
  if (value === null) {
    // 获取缓存值,并按照"|a|n|d|"分割成数组
    const val = uni.getStorageSync(key) || '';
    const tmp = val.split("|a|n|d|");
    // 如果数组的第二个元素不存在或者小于等于当前时间戳,表示缓存已过期,删除缓存并返回空字符串
    if (!tmp[1] || timestamp >= tmp[1]) {
      // console.log("key已失效");
      uni.removeStorageSync(key);
      return "";
    }
    // 否则表示缓存未过期,返回数组的第一个元素,即缓存值
    else {
      // console.log("key未失效");
      return tmp[0];
    }
  }
  // 如果value不为空,表示设置缓存
  else {
    // 如果seconds为空,则使用默认值28天,否则使用传入的值
    const expire = seconds ? timestamp + seconds : timestamp + 3600 * 24 * 28;
    // 将缓存值和过期时间戳用"|a|n|d|"连接成一个字符串,并存入缓存
    value = `${value}|a|n|d|${expire}`;
    uni.setStorageSync(key, value);
  }
}
posted @ 2023-11-24 15:23  huihuihero  阅读(624)  评论(0编辑  收藏  举报