關于前端設置過期時間

UnixAgain 發布于2019-08-23 18:33 / 2458人閱讀

摘要：前言開發過程少不了會遇到給某個狀態設置過期時間的需求例如進入頁面有個默認彈窗用戶關閉之后在小時之內再次打開不能再彈面對這樣需求我們首先想到的是需要設置一個變量去控制彈窗的隱藏因為默認是開啟的如何去保證這個變量的有效時間呢這里就涉及到數據的持

前言

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

GPU云服務器云服務器設置上傳過期時間 session過期時間設置 session設置過期時間設置session過期時間

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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