前端設置過期時間

前言

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

廣州品牌設計公司https://www.houdianzi.com

說說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 標簽關了,則數據清除