localstorage实现带过期时间的缓存功能


Posted in Javascript onJune 28, 2019

前言

一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求。

1.cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效的,即使重启浏览器。但是会在每次HTTP请求中添加到请求头中,如果数据过多,会造成性能问题。

2.sessionStorage保存在浏览器内存中,当关闭页面或者浏览器之后,信息丢失。

3.localstorage也是保存在本地硬盘中,除非主动清除,信息是不会消失的。但是实际使用时我们需要对缓存设置过期时间,本文便是讲解如何为localstorage添加过期时间功能。

这三者仅支持同源(host+port)的数据,不同源的数据不能互相访问到。

localstorage

localstorage支持以下方法

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);  

需要注意的是,仅支持String类型数据的读取,如果存放的是数值类型,读出来的是字符串类型的,对于存储对象类型的,需要在保存之前JSON化为String类型。

对于缓存,我们一般有以下方法

set(key,value,expiredTime);
get(key);
remove(key);
expired(key,expiredTime);
clear();

实现

设置缓存

对于过期时间的实现,除了用于存放原始值的缓存(key),这里添加了两个缓存(key+EXPIRED:TIME)和(key+EXPIRED:START:TIME),一个用于存放过期时间,一个用于存放缓存设置时的时间。

当读取的时候比较 (过期时间+设置缓存的时间)和当前的时间做对比。如果(过期时间+设置缓存时的时间)大于当前的时间,则说明缓存没过期。

注意这里使用JSON.stringify对存入的对象JSON化。读取的时候也要转回原始对象。

"key":{
    //辅助
    "expiredTime": "EXPIRED:TIME",
    "expiredStartTime": "EXPIRED:START:TIME",
    //全局使用
    //用户信息
    "loginUserInfo": "USER:INFO",
    //搜索字段
    "searchString": "SEARCH:STRING",
  },
  /**
   * 设置缓存
   * @param key
   * @param value
   * @param expiredTimeMS 过期时间,单位ms
   */
  "set":function (key,value,expiredTimeMS) {
    if((expiredTimeMS == 0 ) || (expiredTimeMS == null)){
      localStorage.setItem(key,value);
    }
    else {
      localStorage.setItem(key,JSON.stringify(value));
      localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
      localStorage.setItem(key+cache.key.expiredStartTime,new Date().getTime());
    }
  },

 读取缓存

由于读取出来的是时间信息是字符串,需要将其转化为数字再进行比较。

/**
   * 获取键
   * @param key
   * @returns {*} key存在,返回对象;不存在,返回null
   */
  "get":function (key) {
    var expiredTimeMS = localStorage.getItem(key+cache.key.expiredTime);
    var expiredStartTime = localStorage.getItem(key+cache.key.expiredStartTime);
    var curTime = new Date().getTime();
    var sum = Number(expiredStartTime) + Number(expiredTimeMS);
    if((sum) > curTime){
      console.log("cache-缓存["+key+"]存在!");
      return JSON.parse(localStorage.getItem(key));
    }
    else {
      console.log("cache-缓存["+key+"]不存在!");
      return null;
    }
  },

移除缓存

移除缓存时需要把三个键同时移除。

/**
   * 移除键
   * @param key
   */
  "remove":function (key) {
    localStorage.removeItem(key);
    localStorage.removeItem(key+cache.key.expiredTime);
    localStorage.removeItem(key+cache.key.expiredStartTime);
  },

其他代码

/**
   * 对键重新更新过期时间
   * @param key
   * @param expiredTimeMS 过期时间ms
   */
  "expired":function (key,expiredTimeMS) {

    if(cache.get(key)!=null){
      localStorage.setItem(key+cache.key.expiredTime,expiredTimeMS);
    }

  },
  /**
   * 清除所有缓存
   */
  "clear":function () {
    localStorage.clear();
  }

总结

以上所述是小编给大家介绍的localstorage实现带过期时间的缓存功能,希望对大家有所帮助如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript网页关键字高亮代码
Jul 30 Javascript
jquery动态增加删除表格行的小例子
Nov 14 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
简单掌握JavaScript中const声明常量与变量的用法
May 21 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现滚动效果
Nov 17 jQuery
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
vue分页器组件编写方法详解
Jun 28 #Javascript
Vue分页器实现原理详解
Jun 28 #Javascript
vue实现分页栏效果
Jun 28 #Javascript
js实现简单分页导航栏效果
Jun 28 #Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 #Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 #Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
php实现购物车功能(上)
2020/07/23 PHP
Yii清理缓存的方法
2016/01/06 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
微信小程序自定义组件实现tabs选项卡功能
2018/07/14 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python调用opencv实现猫脸检测功能
2019/01/15 Python
python提取log文件内容并画出图表
2019/07/08 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
python之语音识别speech模块
2020/09/09 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
化工专业个人的求职信范文
2013/11/28 职场文书
学习十八大报告感言
2014/02/28 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
碧霞祠导游词
2015/02/09 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
Python循环之while无限迭代
2022/04/30 Python
Go语言编译原理之源码调试
2022/08/05 Golang