首页 > 其他分享 >具备有效期的localStorage存储

具备有效期的localStorage存储

时间:2023-08-06 22:22:11浏览次数:36  
标签:存储 console 有效期 localStorage key error null cycle

具备有效期的localStorage存储

类方式

// 具备有效期的localStorage存储-类方式。
class LocalStorageWrapper {
  // 存储数据到localStorage,记录下当前存储的时间。
  static setItem(key, value) {
    try {
      const item = {
        value,
        time: Date.now(),//过期时间-如果不输入则为无限。
      };
      localStorage.setItem(key, JSON.stringify(item));
    } catch (error) {
      console.error('存储数据到localStorage时出错:', error);
    }
  }

  // 从localStorage中获取数据,如果数据过期则返回null
  static getItem(key, cycle) {
    try {
      cycle = Number(cycle)
      if (isNaN(cycle)) {
        cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
      }
      let data = localStorage.getItem(key)
      if (!data) {
        return null
      }
      let { time, value } = JSON.parse(data)
      if ((Date.now() - time) > cycle) {
        localStorage.removeItem(key)
        return null
      }
      return value
    } catch (error) {
      console.error('从localStorage中获取数据时出错:', error);
      return null;
    }
  }

  // 从localStorage中移除数据
  static removeItem(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error('从localStorage中移除数据时出错:', error);
    }
  }

  // 清空localStorage中的所有数据
  static clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error('清空localStorage时出错:', error);
    }
  }
}
// 示例用法:
const userData = {
  name: '张三',
  age: 30,
  email: '[email protected]'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null

const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);

对象方式

// 具备有效期的localStorage存储-对象方式。
const LocalStorageWrapper= {
  // 存储数据到localStorage,记录下当前存储的时间。
  setItem(key, value) {
    try {
      const item = {
        value,
        time: Date.now(),//过期时间-如果不输入则为无限。
      };
      localStorage.setItem(key, JSON.stringify(item));
    } catch (error) {
      console.error('存储数据到localStorage时出错:', error);
    }
  },

  // 从localStorage中获取数据,如果数据过期则返回null
  getItem(key, cycle) {
    try {
      cycle = Number(cycle)
      if (isNaN(cycle)) {
        cycle = 1000 * 60 * 60 * 24 * 30//默认过期时间为一个月。
      }
      let data = localStorage.getItem(key)
      if (!data) {
        return null
      }
      let { time, value } = JSON.parse(data)
      if ((Date.now() - time) > cycle) {
        localStorage.removeItem(key)
        return null
      }
      return value
    } catch (error) {
      console.error('从localStorage中获取数据时出错:', error);
      return null;
    }
  },

  // 从localStorage中移除数据
  removeItem(key) {
    try {
      localStorage.removeItem(key);
    } catch (error) {
      console.error('从localStorage中移除数据时出错:', error);
    }
  },

  // 清空localStorage中的所有数据
  clear() {
    try {
      localStorage.clear();
    } catch (error) {
      console.error('清空localStorage时出错:', error);
    }
  },
}
/* // 示例用法:
const userData = {
  name: '张三',
  age: 30,
  email: '[email protected]'
};
LocalStorageWrapper.setItem('user', userData);
const storedData = LocalStorageWrapper.getItem('user');
console.log(storedData); // 如果数据未过期,则输出userData对象;否则输出null

const storedData1 = LocalStorageWrapper.getItem('user',1); // 数据过期,则移除旧数据;
console.log(storedData1);

标签:存储,console,有效期,localStorage,key,error,null,cycle
From: https://www.cnblogs.com/fangchaoduan/p/17610195.html

相关文章

  • Python 中整型对象存储的位置
    在Python整型对象所存储的位置是不同的,有一些是预先分配内存的,它一直存储在内存里面,而其它的,则在使用时开辟出空间.说这句话的理由,可以看看如下代码:123456a = 5b = 5a is b # Truea = 500b = 500a is b # False由上面的代码可知,整型5是一直存在的,......
  • cookie和localStorage和sessionStorage的区别
    cookie和localStorage和sessionStorage的区别下面从几个方向区分一下cookie,localStorage,sessionStorage的区别生命周期:cookie:可设置失效时间,否则默认为关闭浏览器后失效。localStorage:除非被手动清除,否则永久保存。sessionStorage:仅在当前网页会话下有效,关闭页面或关......
  • [2023本地存储方案](https://www.cnblogs.com/fangchaoduan/p/17608006.html)
    2023本地存储方案本地存储方案cookie本地存储:有期限的限制,可以自己设置过期期限。在期限内,不论页面刷新还是关闭,存储的信息都还会存在。localStorage本地持久化存储:页面刷新或者关闭,存储的信息一直存在,除非手动清除或者卸载浏览器,而且没有有效期的限制。sessionSto......
  • MySQL之InnoDB存储结构 转载 https://juejin.cn/post/7253816086679846972
    1InnoDB存储引擎InnoDB存储引擎最早由InnobaseOy公司开发(属第三方存储引擎)。从MySQL5.5版本开始作为表的默认存储引擎。该存储引擎是第一个完整支持ACID事务的MySQL存储引擎,特点是行锁设计、支持MVCC、支持外键、提供一致性非锁定读,非常适合OLTP场景的应用使用。目前也是应用......
  • Sql Server 存储过程
    ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Access文件导入数据--------------------------......
  • MySQL中char与varchar的区别:存储机制、性能差异、适用场景
    引用链接:https://www.maoyingdong.com/mysql-char-vs-varchar/ 在MySQL中,varchar和char都可以用来存储字符串。从语义上看,varchar是变长的(Variable-length),char是定长的(Fixed-length)。本文基于MySQL5.7版本,从varchar和char的语义,到存储引擎底层存储机制,探讨它们在存......
  • 619-基于双FMC接口 ZU19EG 的6U VPX采集存储计算处理卡
    一、板卡概述   该板卡是采集、存储、计算、管理一体的高集成度、加固型的信号处理平台,本板卡基于Xilinx公司ZynqUltraScale+MPSOC系列SOCXCZU19EG-FFVC1760架构,其中,ARM端搭载一组64-bitDDR4,总容量达4GB,可稳定运行在2400MT/s,板卡ARM对外支持1路USB3.0接口、2路千兆以太......
  • U8:用友U8导入应付单录入、应收单录入存储过程
     用友U8导入应收单录入、应付单录入的存储过程,以下SQL脚本整合前几天写的《u8:应付单据录入生成编号 》会更好。--应收单据\应付单据都可以用此程序,但需要注意一下两者编号长度不同.DECLAREc_ifacecursorforselectrow_id,cstatus,cBatchNumfromu8api.......
  • 在MySQL中存储树状结构
        原文地址,原文中HierarchicalData直译为 分层结构,这里我翻译成 树状结构。补充资源:https://django-mptt.github.io/django-mptt/ ,如果你也使用python和django,这个是现成的APP。另外,个人觉得这种方法对于搜索的效率提升最大,而相应的新增、删除等操作则会变慢,个人猜测......
  • Linux 下如何修改密码有效期?
    有时我们连接远程服务器的时候,提示密码过期,需要修改密码才能登录,这时可以用chage命令来调整下用户密码的有效期,使用户可以继续使用。chage命令chage命令用于查看以及修改用户密码的有效期信息,它是changeage的缩写。当需要用户在指定时间内登录或者需要及时修改密码的时......