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

 更新时间:2019年06月18日 09:42:11   转载 作者:bayi_lzp  
这篇文章主要介绍了利用js-cookie实现前端设置缓存数据定时失效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、背景

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

二、实现过程

前端设置数据定时失效的可以有下面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让文本框内的最后一个文字的后面获得焦点实现代码

    javaScript让文本框内的最后一个文字的后面获得焦点实现代码

    让文本框内的最后一个文字的后面获得焦点,在应用中很常见,接下来提供解决方案,按兴趣的朋友可以了解下
    2013-01-01
  • JavaScript实现猜数字游戏

    JavaScript实现猜数字游戏

    这篇文章主要为大家详细介绍了JavaScript实现猜数字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • 纯css实现窗户玻璃雨滴逼真效果

    纯css实现窗户玻璃雨滴逼真效果

    css实现窗户上水珠效果,效果特别逼真,窗外的雨淅淅沥沥飘打在玻璃上,看起来很像模糊的窗外,斜滴的雨露,接下来给大家一起来用CSS技术实现这样一幅画面,下面给大家分享使用纯css实现窗户玻璃雨滴逼真效果,感兴趣的朋友快乐围观吧
    2015-08-08
  • 深入理解JavaScript继承的多种方式和优缺点

    深入理解JavaScript继承的多种方式和优缺点

    这篇文章主要介绍了深入理解JavaScript继承的多种方式和优缺点,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js数组常见操作及数组与字符串相互转化实例详解

    js数组常见操作及数组与字符串相互转化实例详解

    这篇文章主要介绍了js数组常见操作及数组与字符串相互转化方法,以实例形式较为详细的分析并总结了JavaScript数组的常见使用技巧与转化方法,需要的朋友可以参考下
    2015-11-11
  • javascript中SetInterval与setTimeout的定时器用法

    javascript中SetInterval与setTimeout的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等,本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
    2015-08-08
  • JavaScript中in和hasOwnProperty区别详解

    JavaScript中in和hasOwnProperty区别详解

    in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。下面通过本文给大家分享JavaScript中in和hasOwnProperty区别详解,感兴趣的朋友一起看看吧
    2017-08-08
  • 深入理解 TypeScript Reflect Metadata

    深入理解 TypeScript Reflect Metadata

    这篇文章主要介绍了深入理解 TypeScript Reflect Metadata,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 使用documentElement正确取得当前可见区域的大小

    使用documentElement正确取得当前可见区域的大小

    如何取得当前浏览器里面可见区域的大小?其他方法都不适用,只有documentElement才可以,需要的朋友可以参考下
    2014-07-07
  • JavaScript返回网页中锚点数目的方法

    JavaScript返回网页中锚点数目的方法

    这篇文章主要介绍了JavaScript返回网页中锚点数目的方法,涉及javascript使用document.anchors获取锚点数目的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04

最新评论