利用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 相关文章推荐
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
javascript 进阶篇2 CSS XML学习
Mar 14 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
JS实现仿京东淘宝竖排二级导航
2014/12/08 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
2013/07/15 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
工作自荐信
2013/12/11 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
大学生个人事迹材料
2014/01/21 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书