localStorage 设置过期时间?

简介: localStorage 设置过期时间?

1、如何不刷新页面改版URL参数

window.history.pushState(state,title,url)

pushState() 带有三个参数:
一个状态对象,
一个标题,
以及一个可选的URL地址。
state: 一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以不填
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
title:新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。

2、根据数量计算换行显示展开收起

1、需求如图

image.png

在一行超过指定数量后,可能数量超过,也可能单个文字长度达到,出现展开按钮。

2、解决办法
1、计算一行大概能够显示几个标签,大概多少字,根据返回数量来进行切割计算是否换行了。
2、计算每一个标签的宽度,超过指定宽度显示展开按钮。

3、vue实现跳转浏览器新的标签页

let newpage = this.$router.resolve({ 
name: 'info',
query:{
type: 1,
id:id
}   
})  
window.open(newpage, '_blank');

4、localStorage 设置过期时间?

localStorage除非人为手动清除,否则会一直存在浏览器中,但可能某些情况下我们可能需要localStorage有一个过期时间,那该怎么实现?

// data 实际的值
// time 当前时间戳
// expire 过期时间
Storage.prototype.getExpire= key =>{
let val =localStorage.getItem(key);
if(!val){
return val;
    }
    val =JSON.parse(val);
if(Date.now()-val.time>val.expire){
        localStorage.removeItem(key);
return null;
    }
return val.data;
}
//使用
localStorage.setExpire("token",'xxxxxx',4000);
window.setInterval(()=>{
console.log(localStorage.getExpire("token"));
},1000)
相关文章
|
3月前
|
缓存 前端开发 CDN
静态资源缓存过期时间的设置
【8月更文挑战第18天】静态资源缓存过期时间的设置
75 1
|
3月前
|
JSON JavaScript 前端开发
Vue项目使用Cookie,以Json格式存入与读取Cookie,设置过期时间以及删除操作
这篇文章介绍了在Vue项目中如何使用JavaScript操作Cookie,包括设置、读取、设置过期时间以及删除Cookie的方法。
259 0
|
5月前
|
缓存 JavaScript
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
请问如何在 keep-alive 组件中设置缓存的最大数量和过期时间
|
11月前
|
存储 程序员 PHP
修改session的过期(生存)时间
以下我以php为例,万变不离其宗,希望对大家都有用吧。 session与cookie: 了解过两者的众所都知道,有些信息保存到cookie,有些出于安全问题就不能直接存到浏览器,这就要用到session了。然而对于浏览器,一般都是默认20-30分钟自动销毁或者关闭浏览器就会销毁。这显示是很头疼的事情,比如我们要实现用户登陆功能,关闭浏览器就要重新登陆,这搞什么鬼?所以我们要去试图改变它们。网上众说纷纭,你可以选择去修改默认配置文件,如php为例,修改php.ini的函数。但是染念却不喜欢修改修改默认,也在网上看到某些程序员是没有权限修改的,所以我们需要做到如何不修改默认文件达到这样的功能。
60 0
cookie实现上次访问时间
cookie实现上次访问时间
80 0
|
存储 JavaScript
本地存储(localStorage)如何设置过期时间?
在我们使用cookie的时候是可以设置有效期的,但是localStorage本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一样设置一个有效期。如果一直存放在浏览器又感觉有点浪费,那我们可以把localStorage进行二次封装实现该方案。
469 0
本地存储(localStorage)如何设置过期时间?
|
缓存 NoSQL MongoDB
一日一技:实现有过期时间的LRU缓存
一日一技:实现有过期时间的LRU缓存
301 0
|
存储 设计模式 数据库
Yii2如何设置session的过期时间?底层原理是什么?
Yii2如何设置session的过期时间?底层原理是什么?
368 0
|
存储 缓存 算法
|
缓存 小程序
【微信小程序】缓存过期时间的相关设置
【微信小程序】缓存过期时间的相关设置
837 0