利用js-cookie实现前端设置缓存数据定时失效


Posted in Javascript onJune 18, 2019

一、背景

业务需要在前端进行数据的缓存,到期就删除再进行获取新数据。

二、实现过程

前端设置数据定时失效的可以有下面2种方法:

1、当数据较大时,可以利用localstorage,存数据时候写入一个时间,获取的时候再与当前时间进行比较
2、如果数据不超过cookie的限制大小,可以利用cookie比较方便,直接设置有效期即可。
3、更多(请大神指点)

利用localstorage实现

localstorage实现思路:

1、存储数据时加上时间戳

在项目开发中,我们可以写一个公用的方法来进行存储的时候加上时间戳

export function setLocalStorageAndTime (key, value) {
 window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() }))
}

项目中应用

存储

// 有数据再进行存储
   setLocalStorageAndTime('XXX', {name: 'XXX'})

读取

// 判断是否返回为null或者失效
getLocalStorageAndTime('XXX', 86400000)

2、获取数据时与当前时间进行比较

export function getLocalStorageAndTime (key, exp = 86400000) {
 // 获取数据
 let data = window.localStorage.getItem(key)
 if (!data) return null
 let dataObj = JSON.parse(data)
 // 与过期时间比较
 if (new Date().getTime() - dataObj.time > exp) {
  // 过期删除返回null
  removeLocalStorage(key)
  console.log('信息已过期')
  return null
 } else {
  return dataObj.data
 }
}

利用cookie实现

我们用js-cookie这款插件来设置cookie,比较方便,可以自行查看文档。

js-cookie 的示例中只有以天为单位的有效期:

Cookies.set('name', 'value', { expires: 7 }); // 7 天后失效

官方文档只要设置天数,没有时分秒,这样我们想设置更小单位的时候无法下手,其实也可以设置时间戳来处理时间的,下面这种方式可以设置任意单位的有效期:

let seconds = 10;
let expires = new Date(new Date() * 1 + seconds * 1000);
Cookies.set('username', 'tanggaowei', { expires: expires }); // 10 秒后失效

贴上利用js-cookie的封装, 记得 npm i js-cookie

import Cookies from 'js-cookie'

/*
* 设置cookies
* */
export function getCookies (key) {
 return Cookies.get(key)
}
/*
* 设置Cookies
* */
export function setCookies (key, value, expiresTime) {
 let seconds = expiresTime
 let expires = new Date(new Date() * 1 + seconds * 1000)
 return Cookies.set(key, value, { expires: expires })
}
/*
* 移除Cookies
* */
export function removeCookies (key) {
 return Cookies.remove(key)
}

三、总结

上面两个方法各有各的优点和缺点,如果小伙伴们有更好方法,麻烦留言互相学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
jquery获取tr并更改tr内容示例代码
Feb 13 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
iview table高度动态设置方法
Mar 14 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 #Javascript
实用Javascript调试技巧分享(小结)
Jun 18 #Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 #Javascript
小程序click-scroll组件设计
Jun 18 #Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 #Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 #Javascript
JS删除String里某个字符的方法
Jan 06 #Javascript
You might like
php获取本周星期一具体日期的方法
2015/04/20 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
PHP的RSA加密解密方法以及开发接口使用
2018/02/11 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
js 获取计算后的样式写法及注意事项
2013/02/25 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
2016/02/29 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python实现学校管理系统
2018/01/11 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
python实现名片管理器的示例代码
2019/12/17 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
如何对python的字典进行排序
2020/06/19 Python
Python异常处理机制结构实例解析
2020/07/23 Python
人力资源作业细则
2014/03/03 职场文书
新品发布会主持词
2014/04/02 职场文书
校企合作协议书
2014/04/16 职场文书
感恩教育活动总结
2014/05/05 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
婚宴父亲致辞
2015/07/27 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers