前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >LocalStorage 设置过期时间?

LocalStorage 设置过期时间?

作者头像
执行上下文
发布2022-07-26 14:55:21
3.1K0
发布2022-07-26 14:55:21
举报
文章被收录于专栏:执行上下文执行上下文

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

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

代码语言:javascript
复制
pushState() 带有三个参数:
一个状态对象,
一个标题,
以及一个可选的URL地址。


state: 一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以不填

url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

title:新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。

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

1、需求如图

1111.png

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

2、解决办法
代码语言:javascript
复制
1、计算一行大概能够显示几个标签,大概多少字,根据返回数量来进行切割计算是否换行了。

2、计算每一个标签的宽度,超过指定宽度显示展开按钮。

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

代码语言:javascript
复制
let newpage = this.$router.resolve({ 
      name: 'info',
      query:{
          type: 1,
          id:id
      }   
})  
window.open(newpage, '_blank');

4、localStorage 设置过期时间?

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

代码语言:javascript
复制
// 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;
}
代码语言:javascript
复制
//使用
localStorage.setExpire("token",'xxxxxx',4000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("token"));
},1000)

以上问题都是日常开发中遇到的,所以有此记录,如果你有不同的解决方案,欢迎留言告诉哦,不同的思路带来不同的碰撞,哈哈。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-06-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 执行上下文 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、如何不刷新页面改版URL参数
  • 2、根据数量计算换行显示展开收起
  • 3、vue实现跳转浏览器新的标签页
    • 4、localStorage 设置过期时间?
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档