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 相关文章推荐
js 操作css实现代码
Jun 11 Javascript
jquery select选中的一个小问题
Oct 11 Javascript
ext 列表页面关于多行查询的办法
Mar 25 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
antd design table更改某行数据的样式操作
Oct 31 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 冒泡排序 交换排序法
2011/05/10 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
详解js闭包
2014/09/02 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
Python实现初始化不同的变量类型为空值
2020/06/02 Python
如何使用PyCharm引入需要使用的包的方法
2020/09/22 Python
手机配件第一品牌:ZAGG
2017/05/28 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
傲盾软件面试题
2015/08/17 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
中间件的定义
2016/08/09 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
安全检查验收制度
2014/01/12 职场文书
亚运会口号
2014/06/20 职场文书
中学生打架检讨书
2014/10/13 职场文书