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 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS实现调用本地摄像头功能示例
May 18 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php微信开发之百度天气预报
2016/11/18 PHP
快速解决PHP调用Word组件DCOM权限的问题
2017/12/27 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
AngularJS  $on、$emit和$broadcast的使用
2016/09/05 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python实现接口并发测试脚本
2019/06/25 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python字典实现伪切片功能
2020/10/28 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
工厂会计员职责
2014/02/06 职场文书
质量管理标语
2014/06/12 职场文书
2014法院四风问题对照检查材料思想汇报
2014/10/04 职场文书
小学教师自我评价
2015/03/04 职场文书
小学运动会宣传稿
2015/07/23 职场文书
婚礼答谢词范文
2015/09/29 职场文书
javascript canvas实现雨滴效果
2021/06/09 Javascript