为编程爱好者分享易语言教程源码的资源网
好用的代理IP,游戏必备 ____广告位招租____ 服务器99/年 ____广告位招租____ ____广告位招租____ 挂机,建站服务器
好用的代理IP,游戏必备 ____广告位招租____ 服务器低至38/年 ____广告位招租____ ____广告位招租____ 挂机,建站服务器

网站首页 > 网络编程 正文

localStorage及sessionStorage自定义过期时间方法实现

三叶资源网 2022-09-29 20:18:50 网络编程 254 ℃ 0 评论

localStorage、sessionStorage是H5引入的新特性,是WEB端存储数据或者缓存数据、提升用户体验的原生的解决方案,两兄弟统称Web Storage。其中localStorage主要作为本地存储使用,除非主动删除,否则一直存放于浏览器中;而sessionStorage主要用于临时保存同一窗口(或标签页)数据,数据会在窗口(或标签页)关闭时“销毁”。

与传统的cookie相比较,有一些共同特性比如“域名独立存放”,同时Web Storage存储还做了一些“变通”,一方面是使用方法原生,封装好无需自定义,即开即用;另一方面存储容量显著提升,localStorage、sessionStorage存储空间最高可达5MB,为业务功能设计增加了很多便利和灵活性。但与cookie相比较,localStorage、sessionStorage也有一些小“缺陷”,比如不支持属性定义比如过期时间设置,这为一些业务场景的应用制造了一些“麻烦”(设计者的初衷并非如此哈),如某接口数据不频繁,缓存在sessionStorage是个不错的选择,但接口数据又不是一成不变的,功能设计上期望能隔一段时间刷新一次(过期自动刷新)。

下面就介绍一种localStorage、sessionStorage自定义过期时间或属性的方法,解决实际业务问题。

(环境说明:node.js/javascript开发环境)

// 核心思想是将value以对象字符串的形式存放 提取时parse成对象再进行后续处理
export const webStorage = {
  validStorageTypes: ['sessionStorage', 'localStorage'],
  setItem (storageType, key, token, userinfo, duration = 86400000) {
    if (!this.validStorageTypes.includes(storageType)) return null
    const obj = {
      token: token,
      userinfo: userinfo,
      expire: new Date().getTime() + duration
    }
    window[storageType].setItem(key, JSON.stringify(obj))
  },
  getItem (storageType, key) {
    if (!this.validStorageTypes.includes(storageType)) return null
    const cacheData = window[storageType].getItem(key)
    if (!cacheData) return null
    const parsedCacheData = JSON.parse(cacheData)
    const currentTime = new Date().getTime()
    if (currentTime < parsedCacheData.expire) {
      return parsedCacheData.token
    } else {
      window[storageType].removeItem(key)
    }
    return null
  },
  removeItem (storageType, key) {
    if (!this.validStorageTypes.includes(storageType)) return null
    window[storageType].removeItem(key)
  }
}

localStorage、sessionStorage的引入确实给数据缓存带来了诸多便利,但安全问题不容忽视,存放数据时建议做安全加密处理,后续有时间展开讨论。

Tags:

来源:三叶资源网,欢迎分享,公众号:iisanye,(三叶资源网⑤群:21414575

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

百度站内搜索
关注微信公众号
三叶资源网⑤群:三叶资源网⑤群

网站分类
随机tag
仓库管理圆形图像旋转工厂模式ckplayer示例多线程采集终极版哈希表地图坐标系转换模块远程文件管理勒索病毒饿了么TCP挂机心跳通用架构乐玩插件SqlServerAI文字转语音剑侠情缘胆码不重复算法账号管理系统播音喇叭HP-socket3调试
最新评论