关于前端设置过期时间

UnixAgain 发布于2019-08-23 18:33 / 2313人阅读

摘要：前言开发过程少不了会遇到给某个状态设置过期时间的需求例如进入页面有个默认弹窗用户关闭之后在小时之内再次打开不能再弹面对这样需求我们首先想到的是需要设置一个变量去控制弹窗的隐藏因为默认是开启的如何去保证这个变量的有效时间呢这里就涉及到数据的持

前言

开发过程少不了会遇到给某个状态设置过期时间的需求,例如:进入页面有个默认弹窗,用户关闭之后在 1 小时之内再次打开不能再弹; 面对这样需求我们首先想到的是需要设置一个变量去控制弹窗的隐藏(因为默认是开启的), 如何去保证这个变量的有效时间呢? 这里就涉及到数据的持久化,前端数据持久化可以理解为客户端数据的持久化, 就是数据存储在本地; 我们马上就想到了 cookie,localStorage,sessionStorage这些属性了...
下面先来解决这个需求, 稍后继续再说一下他们区别

通过cookie设置过期时间

cookie是以键值对的形式保存在浏览器本地的一段文本字符串(前提是浏览器未禁用cookie),各个cookie字段之间一般是以“;”分隔,即"key=value;xxx=yyy"的格式...

js操作cookie的方式是通过 window.cookie来进行读写的;其中expires字段是: 设置cookie的生存时间,当设置了一个时间点后,每次访问浏览器会用当前时间和cookie的expries做比对，如果过期cookie则会被删除,这样我们可以通过判断是否存在 cookie 来关闭弹窗提示了;

代码展示

// 设置 cookie
const setCookie = (name, value, time) => {
  let currentTime = new Date().getTime();
  let expireTime = new Date(currentTime + time);
  document.cookie = name + "="+ value + ";expires=" + expireTime.toGMTString();
}
// 获取 cookie
const getCookie = name => {
    let strCookie = document.cookie; 
    let arrCookie = strcookie.split(";"); 
    // 遍历匹配
    for (let i = 0; i < arrCookie.length; i++) {
        let temp = arrCookie[i].split("=");
        if (temp[0] === name) {
            return temp[1];
        }
    }
    return "";
}
// 进入页面时就判断是否存在设定cookie值, 没有就默认显示;如果有就不显示弹窗; 
// 当我们点击关闭时设置 cookie 的过期时间, 这里的业务代码就不写了

通过 localStorage 来设置

思路基本差不多, 就是在设置的时候额外添加一个时间戳,然后取出来与当前时间做比较, 下面就直接上代码了.

代码展示

// 判断数据类型
dataType = data => {
    return Object.prototype.toString.call(data).slice(8, -1);
};

// 封装我的localStorge
const myLocalStorage = {
    /**
     * @desc 设置缓存 + 过期时间
     * @param {String} item
     * @param {any} value
     * @param {Number} expire
     */
    set(item, value, expire) {
        value = dataType(value) === "Object" ? JSON.stringify(value) : value;
        if (expire) {
            value += "?expire=" + (this.getTime() + expire);
        }
        window.localStorage.setItem(item, value);
    },
    // 获取值
    get(item) {
        let data = window.localStorage.getItem(item) || "";
        let expireIndex = data.indexOf("?expire=");
        let expireTime = data.substring(expireIndex);
        let value = data.substring(0, expireIndex > 0 ? expireIndex : data.length);

        if (expireTime) {
            expireTime = expireTime.substring(8);
            if (expireTime < this.getTime()) {
                // 过期...
                this.clear(item);
                return "";
            } else {
                // 未过期...
                return this.getValue(value);
            }
        }
    },
    // 清除
    clear(item) {
        window.localStorage.removeItem(item);
    },
    // 获取当前时间
    getTime() {
        return new Date().getTime();
    },
    // 获取数据
    getValue(value) {
        // 这里还不够严谨, 判断json为数组和对象
        if (value.includes("{") || value.includes("[")) {
            return JSON.parse(value);
        } else {
            return value;
        }
    },
};

// 业务代码
// ==================================
import { myLocalStorage } from "@/common/js/tool";

export default {
  data() {
    return {
      tips: ""
    };
  },
  created() {
    this.getTip();
  },
  methods: {
    closeTip() {
      this.tips = false;
      this.setTip();
    },
    setTip() {
      myLocalStorage.set("showTip", "24 hours later", 24*60*60*1000);
    },
    getTip() {
      this.tips = myLocalStorage.get("showTip") || "";
    }
  },
  computed: {
    isShowTip() {
      return this.tips === "";
    }
  }
};

说说localStorage,cookie 和 sessionStorage

其实写这篇文章的目的主要想梳理一下自己对这几个特性的理解,分别从作用域,存储大小,生命周期,注意事项来说

window.cookie

1.一般由服务端生成,保存在浏览器端的一段字符串,参与服务端通信,会携带在请求头中;
  服务端可以通过request修改,客户端也可以通过window.cookie 来修改
2.作用域范围
    遵循同源策略; 注意 domain 参数的设置,顶级域名下二级,三级域名是可以实现cookie共享的
3.大小
    一般为 4K左右, 浏览器有个数限制 20
4.生命周期
    设置 expires ;根据具体需求时间设置

window.localStorage

1.存储在浏览器本地的一段字符串,不参与和服务端的通信
2.作用域范围
    同样遵循同源策略,同源站点可以在同一浏览器下进行读写操作
3.大小
    5M左右
4.生命周期
    一直存在,除非人为清除

window.sessionStorage

1.也是存储在浏览器本地的一段字符串,不参与和服务端的通信
2.作用域范围
    同样遵循同源策略,同源站点,同一tab标签页可以在同一浏览器下进行读写操作;
    即:只有同一浏览器、同一窗口的同源页面才能共享数据;如果新开一个 tab 标签是不行的
3.大小
    5M左右
4.生命周期
    与标签页同在; tab 标签关了,则数据清除

混合云超融合服务器设置上传过期时间 session过期时间设置 session设置过期时间设置session过期时间

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105410.html

关于Jwt的一些思考

摘要：而且这样做的话，会存在多个令牌同时有效，可能会引起一些安全问题。这种做法也是很多人采用的一种。对于续期的话，个人觉得第二种方案是比较好的一种方案。而退出的话，如果不考虑泄露的问题，那么第一种方案是比较好的一种方案。这些都是自己对的一些理解。在使用jwt的过程中发现了两个问题续期和退出的问题。续期因为jwt的token在签发之后是有过期时间的，所以就存在管理这个过期时间的问题。我看...

nanfeiyan 2019-07-01 10:49 评论0 收藏0
Cookie、Session和LocalStorage

摘要：通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。使基于无状态的协议记录稳定的状态信息成为了可能。标记为的只应通过被协议加密过的请求发送给服务端。前记前面我已经写了一篇关于Cookie的文章，但是那时候我其实理解的并不是很深刻，会有些搞不懂的地方，今天我就再写一次，博客也是我的学习笔记 Cookie Cookie是服务器发送到用户浏览器并保存在本地的一小块数据...

DesGemini 2019-08-26 12:15 评论0 收藏0
【前端基础进阶】浏览器的缓存机制

摘要：接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。在所有浏览器缓存中，覆盖面基本是最大的。一、前言缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为...

Mertens 2019-08-23 15:32 评论0 收藏0
关于redis的几件小事(四)redis的过期策略以及内存淘汰机制

摘要：的过期策略是什么样的采用了定期删除惰性删除的过期策略。定期删除原理定期删除指的是默认每隔就随机抽取一些设置了过期时间的，检测这些是否过期，如果过期了就将其删掉。所有只会抽取一部分而不会全部检查。 1.数据为什么会过期？首先，要明白redis是用来做数据缓存的，不是用来做数据存储的(当然也可以当数据库用)，所以数据时候过期的，过期的数据就不见了，过期主要有两种情况， ①在设置缓存数据时制定了...

AbnerMing 2019-05-23 16:23 评论0 收藏0
如何在SpringBoot中集成JWT(JSON Web Token)鉴权

摘要：在使用非对称加密算法进行签名的时候，还可以用于验证的发件人是否与中申明的发件人是同一个人。如果没有用非对称加密算法的话，把复制之后直接可以去官网在线解析。这篇博客主要是简单介绍了一下什么是JWT，以及如何在Spring Boot项目中使用JWT(JSON Web Token)。 1.关于JWT 1.1 什么是JWT 老生常谈的开头，我们要用这样一种工具，首先得知道以下几个问题。这...

yeyan1996 2019-08-16 15:54 评论0 收藏0