首页 > 其他分享 >js 浏览器储存数据设置过期时间

js 浏览器储存数据设置过期时间

时间:2023-12-01 15:33:33浏览次数:44  
标签:const 过期 value js expire localStorage key 浏览器 desc

vue项目--- 新建文件sessionTime.js 文件

/** @desc storage相关 */

// type TStorageItem = {
//   value: any
//   expire: string|number
//   time: Date
// };

// type  = 'localStorage' | 'sessionStorage'

/**
* @desc 设置storage
* @param key 键
* @param value 值
* @param exprie 过期时间,如果是数值,多长时间后清除,单位毫秒,如果是string,则表示哪个时间清除
*/
const setStorage = (storageName, key, value, expire) => {
  try {
      const data = {
          value, // 值
          expire, // 过期时间
          time: new Date(), // 存的时间
      };

      window[storageName].setItem(key, encodeURIComponent(JSON.stringify(data)));
  } catch (err) {
      // 失败不管
  }
};

/**
* @desc 获取storage
* @param key 键
* @param return 1为错误  0为过期 value为未过期并返回存入的数据
*/
const getStorage = (storageName, key) => {
  try {
      const data = window[storageName].getItem(key);
      // 转换
      const obj = JSON.parse(decodeURIComponent(data));

      const { value, expire, time } = obj;
      const now = new Date().getTime();

      // 判断有没有过期
      if (typeof expire =='number') {
          const delta = now - (new Date(time).getTime());

          if (delta > expire) {
              window[storageName].removeItem(key);

              return 0;
          }
      }

      if (typeof expire == 'string') {
          const endTime = new Date(expire).getTime();
          const delta = now - endTime;

          if (delta >= 0) {
              window[storageName].removeItem(key);

              return 0;
          }
      }

      return value;
  } catch (err) {
    // console.log(err)
    return 1;
  }
};

/** @desc 设置localStorage */
export const setLocalStorage = (key, value, expire) => {
  setStorage('localStorage', key, value, expire);
};

/** @desc 获取localStorage */
export const getLocalStorage = (key) => getStorage('localStorage', key);

/** @desc 删除localStorage */
export const delLocalStorage = (key) => {
  localStorage.removeItem(key);
};

/** @desc 设置sessionStorage */
export const setSessionStorage = (key , value, expire) => {
  setStorage('sessionStorage', key, value, expire);
};

/** @desc 获取sessionStorage */
export const getSessionStorage = (key) => getStorage('sessionStorage', key);

/** @desc 删除localStorage */
export const delSessionStorage = (key) => {
  sessionStorage.removeItem(key);
};

/** @desc 正常获取localStorage */
export const localStorageNormal = (key, value) => {
  if (value !== undefined) {
      return window.localStorage.setItem(key, value);
  }

  return window.localStorage.getItem(key);
};

在页面使用:
setLocalStorage('存入数据的名称',要存入的数据, 时间毫秒) 如:1000*60*60*24 一天过期,当天凌晨过期可查看另一篇
getLocalStorage('存入数据的名称')
其他逻辑自行添加

标签:const,过期,value,js,expire,localStorage,key,浏览器,desc
From: https://www.cnblogs.com/cyapi/p/17869807.html

相关文章

  • 在redis中,如何在创建key的同时,设置key的过期时间
    1、通过下面的创建key,同时设置过期时间SETkeyvalueEXseconds 示例:setteskey01123ex60  设置key的过期时间是60s,这样在创建的时候,就开始倒计时了。 通过工具看,TTL,会定期的刷新,到0之后,这个key就会被删除了。 60s后,key不存在  如果一个key的TTL......
  • 关于解决vue报错"Problems loading reference 'https://schemastore.azurewebsites.ne
    打开setting时会看到有一条三角形的警告信息 看问题描述:无法从该网站加载解决方法:打开设置,找到扩展下的json项 设置之后可以在settings.json文件中看到新增加一项 "json.schemaDownload.enable":false可以直接在界面上设置: "json.schemaDownload.enable":false......
  • JFinal启动成功之后,使用localhost访问浏览器界面,显示404(之前是可以滴~)
    问题描述问题解决应该是我没有设置只输入localhost弹出的浏览器的html页面内容;然后我只需要调用到localhost/student/,就显示出来相应的界面啦~~~说白了就是路径问题,,......
  • JS逆向——某道翻译
    文章中所有内容仅供学习交流,不可用于任何商业用途和非法用途,如有侵权,请联系作者立即删除!目标网站:aHR0cHM6Ly9mYW55aS55b3VkYW8uY29tL2luZGV4Lmh0bWwjLw==一、定位接口使用Chrome浏览器,打开Network进行抓包输入要翻译的字符串:HelloWorld!页面没有重新加载,初步判断是Ajax......
  • Gradio-Lite: 完全在浏览器里运行的无服务器 Gradio
    Gradio是一个经常用于创建交互式机器学习应用的Python库。在以前按照传统方法,如果想对外分享Gradio应用,就需要依赖服务器设备和相关资源,而这对于自己部署的开发人员来说并不友好。欢迎Gradio-lite(@gradio/lite):一个通过Pyodide在浏览器中直接运行Gradio的库。在......
  • js中get请求参数含有特殊字符的处理
    在拼接参数的时候,使用 encodeURIComponent() 进行手动转义。varurl="xxxx?name="+encodeURIComponent("aaa&bbb")特殊特殊字符的含义:字符特殊字符的含义URL编码+URL中+号表示空格%2B空格URL中的空格可以用+号或者编码%20/分隔目录和子目录%2F?分隔......
  • JMeter的JSON提取器JSON Path一次性提取多个
    JMeter调用接口时,返回一串列表,后面需要列表里的多个参数如下面接口返回示例,我需要提取每个数组里的vpc_id,后面需要用到{"vpcs":[{"vpc_name":"vpc1","vpc_id":"1712289779223859200"},{&qu......
  • Golang中如何自定义时间类型进行xml、json的序列化/反序列化
    在日常开发工作中,我们进行会遇到将struct序列化json字符串以及将json字符串反序列化为struct的场景,大家也对此十分熟悉。最近工作中,遇到了需要将struct序列化xml字符串以及将xml字符串反序列化为struct的场景,对于普通类型的字段,比如int、string等类型,直接......
  • 前端学习-JavaScript学习-js基础-API01
    学习视频:黑马程序员视频链接DOM简介DOM简介DOM树:将HTML文档标签以树状形式表现出来DOM对象:每个标签都是DOM对象DOM核心思想:将网页内容当作对象处理DOM中最大的对象:document,其次是<html><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metan......
  • JSONObject参数顺序问题
    签名需要规定参数顺序不能错。一开始是这么写的JSONObjectparam=newJSONObject();param.put("idcard",user.getIdCard());param.put("mobile",user.getPhone());param.put("uid",user.getId());param.put("username",user.getName());期望得到的顺序应该......