關於前端設置過時時間

前言

開發過程少不了會遇到給某個狀態設置過時時間的需求,例如:進入頁面有個默認彈窗,用戶關閉以後在 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 標籤關了,則數據清除