關(guān)于前端設(shè)置過期時間

UnixAgain 發(fā)布于2019-08-23 18:33 / 2468人閱讀

摘要：前言開發(fā)過程少不了會遇到給某個狀態(tài)設(shè)置過期時間的需求例如進(jìn)入頁面有個默認(rèn)彈窗用戶關(guān)閉之后在小時之內(nèi)再次打開不能再彈面對這樣需求我們首先想到的是需要設(shè)置一個變量去控制彈窗的隱藏因?yàn)槟J(rèn)是開啟的如何去保證這個變量的有效時間呢這里就涉及到數(shù)據(jù)的持

前言

開發(fā)過程少不了會遇到給某個狀態(tài)設(shè)置過期時間的需求,例如:進(jìn)入頁面有個默認(rèn)彈窗,用戶關(guān)閉之后在 1 小時之內(nèi)再次打開不能再彈; 面對這樣需求我們首先想到的是需要設(shè)置一個變量去控制彈窗的隱藏(因?yàn)槟J(rèn)是開啟的), 如何去保證這個變量的有效時間呢? 這里就涉及到數(shù)據(jù)的持久化,前端數(shù)據(jù)持久化可以理解為客戶端數(shù)據(jù)的持久化, 就是數(shù)據(jù)存儲在本地; 我們馬上就想到了 cookie,localStorage,sessionStorage這些屬性了...
下面先來解決這個需求, 稍后繼續(xù)再說一下他們區(qū)別

通過cookie設(shè)置過期時間

cookie是以鍵值對的形式保存在瀏覽器本地的一段文本字符串(前提是瀏覽器未禁用cookie),各個cookie字段之間一般是以“;”分隔,即"key=value;xxx=yyy"的格式...

js操作cookie的方式是通過 window.cookie來進(jìn)行讀寫的;其中expires字段是: 設(shè)置cookie的生存時間,當(dāng)設(shè)置了一個時間點(diǎn)后,每次訪問瀏覽器會用當(dāng)前時間和cookie的expries做比對，如果過期cookie則會被刪除,這樣我們可以通過判斷是否存在 cookie 來關(guān)閉彈窗提示了;

代碼展示

// 設(shè)置 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 "";
}
// 進(jìn)入頁面時就判斷是否存在設(shè)定cookie值, 沒有就默認(rèn)顯示;如果有就不顯示彈窗; 
// 當(dāng)我們點(diǎn)擊關(guān)閉時設(shè)置 cookie 的過期時間, 這里的業(yè)務(wù)代碼就不寫了

通過 localStorage 來設(shè)置

思路基本差不多, 就是在設(shè)置的時候額外添加一個時間戳,然后取出來與當(dāng)前時間做比較, 下面就直接上代碼了.

代碼展示

// 判斷數(shù)據(jù)類型
dataType = data => {
    return Object.prototype.toString.call(data).slice(8, -1);
};

// 封裝我的localStorge
const myLocalStorage = {
    /**
     * @desc 設(shè)置緩存 + 過期時間
     * @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);
    },
    // 獲取當(dāng)前時間
    getTime() {
        return new Date().getTime();
    },
    // 獲取數(shù)據(jù)
    getValue(value) {
        // 這里還不夠嚴(yán)謹(jǐn), 判斷json為數(shù)組和對象
        if (value.includes("{") || value.includes("[")) {
            return JSON.parse(value);
        } else {
            return value;
        }
    },
};

// 業(yè)務(wù)代碼
// ==================================
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

其實(shí)寫這篇文章的目的主要想梳理一下自己對這幾個特性的理解,分別從作用域,存儲大小,生命周期,注意事項來說

window.cookie

1.一般由服務(wù)端生成,保存在瀏覽器端的一段字符串,參與服務(wù)端通信,會攜帶在請求頭中;
  服務(wù)端可以通過request修改,客戶端也可以通過window.cookie 來修改
2.作用域范圍
    遵循同源策略; 注意 domain 參數(shù)的設(shè)置,頂級域名下二級,三級域名是可以實(shí)現(xiàn)cookie共享的
3.大小
    一般為 4K左右, 瀏覽器有個數(shù)限制 20
4.生命周期
    設(shè)置 expires ;根據(jù)具體需求時間設(shè)置

window.localStorage

1.存儲在瀏覽器本地的一段字符串,不參與和服務(wù)端的通信
2.作用域范圍
    同樣遵循同源策略,同源站點(diǎn)可以在同一瀏覽器下進(jìn)行讀寫操作
3.大小
    5M左右
4.生命周期
    一直存在,除非人為清除

window.sessionStorage

1.也是存儲在瀏覽器本地的一段字符串,不參與和服務(wù)端的通信
2.作用域范圍
    同樣遵循同源策略,同源站點(diǎn),同一tab標(biāo)簽頁可以在同一瀏覽器下進(jìn)行讀寫操作;
    即:只有同一瀏覽器、同一窗口的同源頁面才能共享數(shù)據(jù);如果新開一個 tab 標(biāo)簽是不行的
3.大小
    5M左右
4.生命周期
    與標(biāo)簽頁同在; tab 標(biāo)簽關(guān)了,則數(shù)據(jù)清除

GPU云服務(wù)器云服務(wù)器設(shè)置上傳過期時間 session過期時間設(shè)置 session設(shè)置過期時間設(shè)置session過期時間

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105410.html

發(fā)表評論

登陸后可評論

0條評論

UnixAgain

男|高級講師

我要關(guān)注我要私信

TA的文章

動手寫個數(shù)字輸入框3：痛點(diǎn)——輸入法是個魔鬼

閱讀 435·2019-08-29 12:44
學(xué)習(xí) canvas 的 globalCompositeOperation 做出的神奇效果

閱讀 3013·2019-08-26 17:49
React Bind Handle的思考

閱讀 2443·2019-08-26 13:40
19/3/31學(xué)習(xí)筆記

閱讀 1189·2019-08-26 13:39
作為前端，你不得不知道的SEO

閱讀 3668·2019-08-26 11:59
es6箭頭函數(shù)

閱讀 1830·2019-08-26 10:59
關(guān)于前端設(shè)置過期時間

閱讀 2469·2019-08-23 18:33
$.ajax()的使用

閱讀 2698·2019-08-23 18:30

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于前端設(shè)置過期時間

相關(guān)文章

關(guān)于Jwt的一些思考

Cookie、Session和LocalStorage

【前端基礎(chǔ)進(jìn)階】瀏覽器的緩存機(jī)制

關(guān)于redis的幾件小事(四)redis的過期策略以及內(nèi)存淘汰機(jī)制

如何在SpringBoot中集成JWT(JSON Web Token)鑒權(quán)

發(fā)表評論

0條評論

UnixAgain

男|高級講師

TA的文章

動手寫個數(shù)字輸入框3：痛點(diǎn)——輸入法是個魔鬼

學(xué)習(xí) canvas 的 globalCompositeOperation 做出的神奇效果

React Bind Handle的思考

19/3/31學(xué)習(xí)筆記

作為前端，你不得不知道的SEO

es6箭頭函數(shù)