广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >localStorage过期时间设置的几种方法
  • 182
分享到

localStorage过期时间设置的几种方法

2024-04-02 19:04:59 182人浏览 独家记忆
摘要

目录问题描述 1. 初级解法 2. 中级解法 3. 高级解法 4. 骨灰级解法 聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem,

聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem, setItem, removeItem, clear 这几个 api 轻松的对存储在浏览器本地的数据进行**「读,写, 删」操作, 但是相比于 cookie, localStorage 唯一美中不足的就是「不能设置每一个键的过期时间」**。

localStorage 属性允许我们访问一个 Document 源(origin)的对象 Storage;存储的数据将保存在浏览器会话中。 localStorage 类似 sessionStorage,但其区别在于:存储在 localStorage 的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。 

我们还应注意,localStorage 中的键值对总是以字符串的形式存储。

问题描述

在实际的应用场景中, 我们往往需要让 localStorage 设置的某个 「key」 能在指定时间内自动失效, 所以基于这种场景, 我们如何去解决呢?

1. 初级解法

对于刚熟悉前端的朋友, 可能会立马给出答案:


localStorage.setItem('dooring', '1.0.0')
// 设置一小时的有效期
const expire = 1000 * 60 * 60;
setTimeout(() => {
  localStorage.setItem('dooring', '')
}, expire)

当然这种方案能解决一时的问题, 但是如果要设置任意键的有效期, 使用这种方案就需要编写多个定时器, 「维护成本极高, 且不利于工程化复用」。

2. 中级解法

前端工程师在有一定的工作经验之后, 往往会去考虑工程化和复用性的问题, 并对数据结构有了一定的了解, 所以可能会有接下来的解法:

  • 用**「localStorage」**存一份{key(键): expire(过期时间)}的映射表
  • 重写**「localStorage API」**, 对方法进行二次封装

类似的代码如下:


const store = {
  // 存储过期时间映射
  setExpireMap: (key, expire) => {
    const expireMap = localStorage.getItem('EXPIRE_MAP') || "{}"
    localStorage.setItem(
      'EXPIRE_MAP', 
      JSON.stringify({
      ...jsON.parse(expireMap),
      key: expire
    }))
  },
  setItem: (key, value, expire) => {
    store.setExpireMap(key, expire)
    localStorage.setItem(key, value)
  },
  getItem: (key) => {
    // 在取值之前先判断是否过期
    const expireMap = JSON.parse(
      localStorage.getItem('EXPIRE_MAP') || "{}"
    )
    if(expireMap[key] && expireMap[key] < Date.now()) {
      return localStorage.getItem(key)
    }else {
      localStorage.removeItem(key)
      return null
    }
  }
  // ...
}

眨眼一看这个方案确实解决了复用性的问题, 并且不同团队都可以使用这个方案, 但仍然有一些缺点:

  • 对 store 操作时需要维护2份数据, 并且占用缓存空间
  • 如果 EXPIRE_MAP 误删除将会导致所有过期时间失效
  • 对操作过程缺少更灵活的控制(比如操作状态, 操作回调等)

3. 高级解法

为了减少维护成本和空间占用, 并支持一定的灵活控制和容错能力, 我们又应该怎么做呢?
这里笔者想到了两种类似的方案:

  1. 将过期时间存到 key 中, 如 dooring|6000, 每次取值时通过分隔符“|”来将 key 和 expire 取出, 进行判断
  2. 将过期时间存到 value 中, 如 1.0.0|6000, 剩下的同1

为了更具有封装性和可靠性, 我们还可以配置不同状态下的回调, 简单实现如下:


const store = {
  preId: 'xi-',
  timeSign: '|-door-|',
  status: {
    SUCCESS: 0,
    FaiLURE: 1,
    OVERFLOW: 2,
    TIMEOUT: 3,
  },
  storage: localStorage || window.localStorage,
  geTKEy: function (key: string) {
    return this.preId + key;
  },
  set: function (
    key: string,
    value: string | number,
    time?: Date & number,
    cb?: (status: number, key: string, value: string | number) => void,
  ) {
    let _status = this.status.SUCCESS,
      _key = this.getKey(key),
      _time;
    // 设置失效时间,未设置时间默认为一个月
    try {
      _time = time
        ? new Date(time).getTime() || time.getTime()
        : new Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    } catch (e) {
      _time = new Date().getTime() + 1000 * 60 * 60 * 24 * 31;
    }
    try {
      this.storage.setItem(_key, _time + this.timeSign + value);
    } catch (e) {
      _status = this.status.OVERFLOW;
    }
    cb && cb.call(this, _status, _key, value);
  },
  get: function (
    key: string,
    cb?: (status: number, value: string | number | null) => void,
  ) {
    let status = this.status.SUCCESS,
      _key = this.getKey(key),
      value = null,
      timeSignLen = this.timeSign.length,
      that = this,
      index,
      time,
      result;
    try {
      value = that.storage.getItem(_key);
    } catch (e) {
      result = {
        status: that.status.FAILURE,
        value: null,
      };
      cb && cb.call(this, result.status, result.value);
      return result;
    }
    if (value) {
      index = value.indexOf(that.timeSign);
      time = +value.slice(0, index);
      if (time > new Date().getTime() || time == 0) {
        value = value.slice(index + timeSignLen);
      } else {
        (value = null), (status = that.status.TIMEOUT);
        that.remove(_key);
      }
    } else {
      status = that.status.FAILURE;
    }
    result = {
      status: status,
      value: value,
    };
    cb && cb.call(this, result.status, result.value);
    return result;
  },
  // ...
};

export default store;

这样, 我们就实现了每个 key 都有独立的过期时间, 并且对不同的操作结果可以轻松的进行状态管控啦~

4. 骨灰级解法

当然, 骨灰级解法是直接使用 xijs 这个 javascript 工具库, 因为我已经将上述完整实现方案封装到该库中了, 我们只需要使用如下的方案, 就能轻松使用具有过期时间的强大的 「localStorage」 方法啦 :


//  先安装 yarn add xijs
import { store } from 'xijs';
// 设置带有过期时间的key
store.set('name', 'dooring', Date.now() + 1000);
console.log(store.get('name'));
setTimeout(() => {
  console.log(store.get('name'));
}, 1000);

// 设置成功后的回调
store.set('dooring', 'xuxiaoxi', Date.now() + 1000, (status, key, value) => {
  console.log('success');
});

同时 xijs 还在持续扩充更有用的工具函数, 让业务开发更高效. 目前已集成了如下工具函数:

  • 「store」 基于 localStorage 上层封装的支持过期时间设置的缓存库, 支持操作回调
  • 「uuid」 生成唯一id, 支持设置长度
  • 「randomStr」 生成指定个数的随机字符串
  • 「fORMatDate」 开箱即用的时间格式化工具
  • 「debounce」 防抖函数
  • 「throttle」 节流函数
  • 「url2obj」 将url字符串转换为对象
  • 「obj2url」 将对象转换成编码后的url字符串
  • 「isPC」 判断设备是否为PC类型

GitHub地址: https://github.com/MrXujiang/xijs

文档地址:h5.dooring.cn/xijs

到此这篇关于localStorage过期时间设置的几种方法的文章就介绍到这了,更多相关localStorage 过期时间内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: localStorage过期时间设置的几种方法

本文链接: https://www.lsjlt.com/news/160198.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • localStorage过期时间设置的几种方法
    目录问题描述 1. 初级解法 2. 中级解法 3. 高级解法 4. 骨灰级解法 聊到 localStorage 想必熟悉前端的朋友都不会陌生, 我们可以使用它提供的 getItem,...
    99+
    2022-11-12
  • Java如何设置过期时间的map的几种方法
    目录一、技术背景二、技术效果三、ExpiringMap3.1功能简介3.2源码3.3示例四、LoadingCache4.1功能简介4.2示例4.3移除机制4.4其他五、HashMap...
    99+
    2022-11-13
  • localStorage设置有效期和过期时间的简单方法
    目录前言实现思路实现代码总结前言 总所周知localStorage默认是不会过期的,也没有可设置过期的api,如果要实现过期清除就需要自己实现一个api 实现思路 在Storage原...
    99+
    2022-11-13
  • 如何设置localStorage的过期时间
    这期内容当中小编将会给大家带来有关如何设置localStorage的过期时间,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。<script type="text/javascrip...
    99+
    2023-06-09
  • 如何使用localStorage 设置过期时间
    这篇文章将为大家详细讲解有关如何使用localStorage 设置过期时间,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。localStorage除非人为手动清除,否则会一直存放在浏览器中,但...
    99+
    2023-06-09
  • localStorage如何设置有效期和过期时间
    这篇文章将为大家详细讲解有关localStorage如何设置有效期和过期时间,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。实现思路在Storage原型上新增两个方法setCanExpireLocal,ge...
    99+
    2023-06-29
  • 本地存储localStorage设置过期时间示例详解
    目录思考实现思路代码实现代码测试思考 在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中...
    99+
    2023-01-15
    本地存储localStorage设置过期时间 localStorage设置过期时间
  • asp中设置session过期时间方法总结
    在ASP中,可以使用以下几种方法来设置session过期时间:1. 在web.config文件中配置session过期时间:可以在w...
    99+
    2023-08-17
    asp
  • 聊聊Vue提示框设置时间的几种方法
    Vue是一种流行的JavaScript框架,用于构建现代和交互式的Web应用程序。提示框是一个常用的UI组件,可以帮助用户在需要时快速了解信息。在Vue中,可以使用各种库和组件来创建提示框,其中包括一些具有时间参数的选项。本文将讨论Vue提...
    99+
    2023-05-14
  • Redis设置key的过期时间
    Redis中可以设置数据的过期时间,一旦过期自动删除数据。 1.设置过期时间 expire 127.0.0.1:6379> set name "ok" //设置10s后过期,e...
    99+
    2023-01-28
    Redis设置key过期时间 Redis key过期时间
  • python运行时间的几种方法
    最早见过手写的,类似于下面这种: import datetime def time_1(): begin = datetime.datetime.now() sum = 0 for i ...
    99+
    2022-06-04
    几种方法 时间 python
  • Java怎么设置过期时间的map
    这篇文章给大家分享的是有关Java怎么设置过期时间的map的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、技术背景在实际的项目开发中,我们经常会使用到缓存中间件(如redis、MemCache等)来帮助我们提高...
    99+
    2023-06-29
  • Redis 过期键的设置、获取和删除过期时间
    Redis 过期键的设置、获取和删除过期时间 设置过期 默认情况下键是没有生存时间的,也就是永不过期,除非清空内存。 设置的键的生存时间也很容易,可以通过4个命令设置(任选一即可):EXPIRE、PEXP...
    99+
    2022-10-18
  • php时间转化为星期几的方法
    小编给大家分享一下php时间转化为星期几的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!转换方法:1、使用date()和“strtotime(指定日期)”将日期转换成表示星期的数字;2、定义“array("日...
    99+
    2023-06-14
  • 浅谈redis的过期时间设置和过期删除机制
    目录一:设置过期时间二:保存过期时间三:移除过期时间四:计算并返回剩余生存时间五:过期键的删除策略六:redis使用的策略一:设置过期时间 redis有四种命令可以用于设置键的生存时...
    99+
    2022-11-13
  • 如何设置合适的redis过期时间
    这篇文章运用简单易懂的例子给大家介绍如何设置合适的redis过期时间,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。          ...
    99+
    2022-10-18
  • Redis中怎么设置过期时间的Key
    Redis中怎么设置过期时间的Key,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1、 DEL/SET/GETSET等命令会清除过期时间在使用...
    99+
    2022-10-18
  • Springsecurity Oauth2如何设置token的过期时间
    1.设置token的过期时间 如果我们是从数据库来读取客户端信息的话 我们只需要在数据库设置token的过期时间 1.1 oauth_client_details表每个列的作...
    99+
    2022-11-12
  • redis怎么设置默认的过期时间
    在Redis中,可以使用`EXPIRE`命令设置键的过期时间。但是,如果你想要为所有键设置一个默认的过期时间,可以使用Redis的`...
    99+
    2023-09-06
    redis
  • SpringBoot使用@Cacheable时设置部分缓存的过期时间方式
    目录使用@Cacheable时设置部分缓存的过期时间业务场景添加Redis配置类RedisConfig.java@Cacheable自定义缓存过期时间pomymlRedisConfi...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作