首页 > 其他分享 >uniapp 封装一个类似js-cookie可时效性存储token的方法

uniapp 封装一个类似js-cookie可时效性存储token的方法

时间:2023-11-24 15:37:46浏览次数:43  
标签:uniapp 缓存 const seconds timestamp value js token key

贴代码 cache.js

/**
 * 存储数据
 * key: 缓存的键名,必填
 * value: 缓存的值,选填
 * seconds: 缓存的过期时间,选填,单位为秒,默认为28天
 */
function set(key, value, seconds) {
  if (!key) { // 如果key为空,直接返回
    console.log("key不能空");
    return;
  }

  const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒

  // 如果seconds为空,则使用默认值28天,否则使用传入的值
  const expire = seconds ? timestamp + seconds : timestamp + 3600 * 24 * 28;

  // 将缓存值和过期时间戳用"|a|n|d|"连接成一个字符串,并存入缓存
  let newValue = `${value}|a|n|d|${expire}`;
  uni.setStorageSync(key, newValue);
}

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

  const timestamp = Date.parse(new Date()) / 1000; // 获取当前时间戳,单位为秒

  // 获取缓存值,并按照"|a|n|d|"分割成数组
  const val = uni.getStorageSync(key) || '';
  const tmp = val.split("|a|n|d|");
  if (!tmp[1] || timestamp >= tmp[1]) { // 如果数组的第二个元素不存在或者小于等于当前时间戳,表示缓存已过期,删除缓存并返回空字符串
    remove(key);
    return "";
  } else { // 否则表示缓存未过期,返回数组的第一个元素,即缓存值
    return tmp[0];
  }
}

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

  uni.removeStorageSync(key);
}



// 缓存函数,设置或获取缓存值,带有过期时间戳
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);
  }
}


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

使用

引入
import cacheToken from "@/utils/cache/cache.js"

存
cacheToken.set('token', '111111', 88);  //设置88秒后过期

取
tokenInfo = cacheToken.get('token') || '';

删
cacheToken.remove('token')

标签:uniapp,缓存,const,seconds,timestamp,value,js,token,key
From: https://www.cnblogs.com/huihuihero/p/17853823.html

相关文章

  • 使用 pdf.js 在线预览 pdf 文件
    1、下载 https://github.com/mozilla/pdf.js/releases2、解压后得到build和web两个文件夹3、将其放入网站目录下4、使用web中的viewer.html即可在线预览pdf文件viewer.html?file=xxx.pdf5、无法加载请检查是否有相应的mime配置(mjs、ftl)......
  • 未能加载文件或程序集“Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicK
    报错内容 解决办法:在Web.config的<configuration></configuration>中添加如下代码即可。<configuration><runtime><assemblyBindingxmlns="urn:schemas-microsoft-com:asm.v1"><dependentAssembly><assembly......
  • uniapp打包的ipa上架到appstore的傻瓜式教程
    ​转载:uniapp打包的ipa上架到appstore的傻瓜式教程uniapp打包在HBuilderX编辑器中打开需要打包的项目,然后点击上面菜单栏中发行=>原生App-云打包,对以下弹出的弹窗进行内容填写  ​  填写完成以后,点击打包操作  ​    ​  点击继续打包,等待......
  • js 大文件切片,中止上传,上传进度,断点续传
    大文件切片上传背景介绍:当涉及大文件上传时,一种有效的方法是将大文件分割成小切片并逐个上传。这种技术不仅可以减轻服务器的负担,还可以避免上传过程中的中断和内存问题。本文将介绍如何使用JavaScript实现大文件切片上传,并解释如何处理断点续传、并发控制以及上传取消等问题,用到的......
  • 基于JS的大文件分片
    项目需要上传超大文件,后台为DJANGO,不能直接用H5的FILEAPI来POST,所以采用slice分片在分片后为BLOB不能直接传,bolb转file有些浏览器又有支持问题。所以做一些转换,转uint8,uint16,uint32,django的后台处理起来都比较烦所以试着用base64装入json,很容易搞定。具体思路:1.读入文件路径2.按......
  • uniapp-微信小程序绑定动态样式 :style 避坑
    在uniapp中绑定动态样式:style="object"使用此种方法,在H5页面中并不会出现任何问题而在微信小程序中,此种方式就会被编译成 style="[object,object]"从而导致样式无法生效解决方法:    使用:style="[object]"此种方式即可......
  • Extjs应用tab页的最简单Demo
    <html><head><title>Extjs应用tab页的最简单Demo</title><linkrel="stylesheet"type="text/css"href="theme-gray-all.css"/><scripttype="text/javascript"src="ext-all.js"><......
  • 开源在线客服系统源码PHP(H5网页在线客服系统小程序源码uniapp全套搭建)
    现代客户服务的重要性得到了越来越多的认可。一个优质的客户服务可以使客户在购买和使用产品、寻求技术支持时获得更好的体验,从而建立起品牌声誉和客户忠诚度。为了优化客户服务体验,许多企业已经开始使用客服系统来更好地管理、响应和交互客户需求。源码:kf.zxkfym.top......
  • js 全局变量
    1、赋值并保存import{setSessionStorage}from'@/store/index' Vue.prototype.$userId=res.result.userInfo.idVue.prototype.$userType=res.result.userInfo.postsetSessionStorage()2、index.jsexportfunctionsetSessionStorage(){varstore={......
  • uniapp+vue3中使用swiper和自定义header实现左右滑动的Tabs功能
    首先创建一个Tabs的Header,包含有一个下划线的指示器,在点击tabs的标题时候下划线会跟着动态的滑动下面是完整的Tabs的代码,可以看到定义了Tabs的background颜色样式,包含tab的宽度indicatorWidth,以及下划线的颜色indicatorColor主要的是tabList属性,通过tabList传入对应的tab数组得......