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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
jquery实现轮播图效果
Feb 13 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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 木马攻击防御技巧
2009/06/13 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python实现的简单窗口倒计时界面实例
2015/05/05 Python
Python实现的归并排序算法示例
2017/11/21 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python 同时运行多个程序的实例
2019/01/07 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python NumPy ndarray二维数组 按照行列求平均实例
2019/11/26 Python
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
教师岗位职责
2013/11/17 职场文书
总经理岗位职责范本
2014/02/02 职场文书
员工保密协议书
2014/09/27 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年新教师工作总结
2015/04/28 职场文书
无罪辩护词范文
2015/05/21 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
用Python可视化新冠疫情数据
2022/01/18 Python