利用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 相关文章推荐
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
Vue项目中跨域问题解决方案
Jun 05 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
Feb 21 Javascript
小程序的上传文件接口的注意要点解析
Sep 17 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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代码优化的53个细节
2014/03/03 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
详解js的异步编程技术的方法
2017/02/09 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
python检测服务器是否正常
2014/02/16 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
Python类的继承super相关原理解析
2020/10/22 Python
奉献演讲稿范文
2014/05/21 职场文书
教师节座谈会主持词
2015/07/03 职场文书
七一表彰大会简报
2015/07/20 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
js之ajax文件上传
2021/05/13 Javascript
深入浅析React中diff算法
2021/05/19 Javascript
python中 Flask Web 表单的使用方法
2022/05/20 Python