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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
Jun 03 Javascript
angularjs封装bootstrap时间插件datetimepicker
Jun 20 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
36个正则表达式(开发效率提高80%)
Nov 17 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
在字符串中把网址改成超级链接
2006/10/09 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
js实现tab切换效果
2017/02/16 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python连接phoenix的方法示例
2017/09/29 Python
python MySQLdb使用教程详解
2018/03/20 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
办公室副主任岗位职责
2013/11/25 职场文书
自我反省检讨书
2014/01/23 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
文案策划求职信
2014/04/14 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
校车安全责任书
2014/08/25 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
北京青年观后感
2015/06/15 职场文书
检讨书格式
2019/04/25 职场文书