localStorage实现7天登录过期

实现原理：存localStorage比较初始登录时存在缓存的时间戳和现在进入页面的时间戳，然后用sessionStorage去判断不勾选但是登录了的状态

精简版

function isPastDue() {
// 过期时间7天
var time = 604800000; //1000*60*60*24*7;
var storage = window.localStorage;
var oldTimestamp = storage.getItem('timestamp');//以前存的时间戳
if (oldTimestamp){
var nowTimestamp = new Date().getTime();//当前时间戳
// 如果当前时间戳> 前面存的时间戳+过期时间表示已经过期
var sumTimestamp = timestamp + time;
if (nowTimestamp > sumTimestamp) {
storage.clear();
}
}
}

完整版：

//1、点击了登录成功后的回调函数里
var localStorage = window.localStorage;
var sessionStorage = window.sessionStorage;
var userInfo = res.data.data[0];
if(that.checkBox){//如果勾选了7天
localStorage.setItem("timestamp", new Date().getTime());
sessionStorage.setItem('greenPath',1);
}else{
sessionStorage.setItem('greenPath',0);
}

//2、在main.js的router.beforeEach里

// 7天登录
function isPastDue() {
// 过期时间7天
var time = 604800000; //1000*60*60*24*7;
var storage = window.localStorage;
if (storage.getItem('timestamp')){
var oldTimestamp = storage.getItem('timestamp');//以前存的时间戳
var nowTimestamp = new Date().getTime();//当前时间戳
// 如果当前时间戳> 前面存的时间戳+过期时间表示已经过期
var sumTimestamp = oldTimestamp + time;
if (nowTimestamp > sumTimestamp) {
storage.clear();
}
}else{
if (sessionStorage.getItem('greenPath')==0) {
return false;
}else{
storage.clear();
}
}
}

登录过期--localStorage加sessionStorage实现7天登录过期相关推荐

HTML5 学习笔记（三）——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
html5 localstorage 生命周期,cookie、localStorage和sessionStorage 三者之间的区别以及存储、获取、删除等使用方式...
写在前面: 前端开发的供个到效近一项消果近一项消果近一项消果近时候,在网页刷新的时候,所有数据都会被清空,这时候就要用到本地存储的技术,前端本地存储的方式有三种,分别是cookie,localstor ...
本地存储三种方式cookie、localStorage、sessionStorage的详细介绍
前言网页刷新的时候数据会被清空,这时候就需要用到存储技术.前端本地存储的方式有三种,分别是cookie.localStorage.sessionStorage.在前端面试过程中,经常会被问及这些存储 ...
前端cookie、localStorage、sessionStorage缓存技术总结
前端cookie.localStorage.sessionStorage缓存技术总结转载自:https://www.cnblogs.com/belove8013/p/8134067.html 1.C ...
2.javascript之缓存 localStorage 和sessionStorage之间的区别
2018-08-04 前言今天做项目的时候遇到了这个问题,用户登录成功之后如何改变将登录的链接切换为用户名解决方案:使用了sessionstorage缓存和js的onload加载事件用户登录成 ...
Vue项目代码改进（三）—— Cookie、LocalStorage和SessionStorage的使用
存在问题: 如果在退出页面时,没有点击"退出"按钮,而是直接关闭页面,token并没有被清除,依然能通过访问http://localhost:8080/#/ 直接进入主页. 原因: ...
解决浏览器存储问题，不得不了解的cookie,localStorage和sessionStorage
浏览器存储方式一.浏览器存储的方式二.cookie.localStorage和sessionStorage 1.cookie.localStorage和sessionStorage是什么? (1) ...
缓存方案coolKie、localStorage、sessionStorage介绍和简单的使用
三种缓存方案coolKie.localStorage.sessionStorage cookie cookie是小甜饼的意思,顾名思义,cookie确实非常小,他的大小限制在4KB左右. 他的主要用途 ...
【面试题】详解Cookie、localStorage、sessionStorage区别
[面试题]详解Cookie.localStorage.sessionStorage区别三者基本概念 Cookie localStorage sessionStorage 安全性的考虑 Cookie. ...

登录过期--localStorage加sessionStorage实现7天登录过期

localStorage实现7天登录过期

登录过期--localStorage加sessionStorage实现7天登录过期相关推荐

最新文章

热门文章