利用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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
Javascript 模式实例 观察者模式
Oct 24 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP 事务处理数据实现代码
2010/05/13 PHP
破解.net程序(dll文件)编译和反编译方法
2013/01/31 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP简单生成缩略图相册的方法
2015/07/29 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
Python模块WSGI使用详解
2018/02/02 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Odoo中如何生成唯一不重复的序列号详解
2018/02/10 Python
python assert的用处示例详解
2019/04/01 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
生物技术专业求职信
2014/06/10 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
学生保证书格式
2015/02/27 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
女性健康讲座主持词
2015/07/04 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
浅谈怎么给Python添加类型标注
2021/06/08 Python