关于前端设置过时时间

前言

开发过程少不了会遇到给某个状态设置过时时间的需求,例如:进入页面有个默认弹窗,用户关闭以后在 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 标签关了,则数据清除