前端小白閒着沒事，封裝一個可以設置過期時間的localStorage存儲函數，在vue腳手架中使用

本身localStorage 是沒有這個功能的，除非手動刪除要不永久保存在本地。
seesionStorage 我們就不考慮 他這個只要網頁的標籤關閉了 在當前標籤就自動清除了存儲。
在工作中 我們用的localStorage 比較多
這裏再次 回想下 曾經的那個面試題 sessionStorage是關閉瀏覽器清除還是關閉標籤清除；
答案是 關閉標籤。

好了 不閒扯 直接步入正題 封裝 函數，這裏我也參考其他大佬的想法
本來也想着用 class 進行封裝 可能想着 低版本可能支持的不是太好 就選擇es5的方法進行了封裝

storage.js

let myStorage=(function() {
	// 存取數值
    function setItem(params) {
        // 參數適配  防止用戶少輸入參數
        const obj = {
            name: "",   // 存入數據  屬性
            value: "",   // 屬性值
            expires: "",   // 過期時間
            startTime: new Date().getTime()  // 存入的時候 的時間
        }
        const options: any = {};
        // 將obj 和傳進來的params 合併  放入到那個 options裏面 實現js中淺拷貝
        Object.assign(options, obj, params);
		// 判斷用戶是否設置了過期時間
        if (options.expires) {
            //  以options.name爲key,    options爲值放進去
            localStorage.setItem(options.name, JSON.stringify(options));
        } else {
            // 如果 options.expires 沒有設置的話， 就判斷一下value的類型
            // 注意 我們 的 localStorage 只能存儲字符串 像是數組和對象要轉換下
            let type = Object.prototype.toString.call(options.value);
            if (type == '[object Object]' || type == '[object Array]') {
                options.value = JSON.stringify(options.value);
            }
            localStorage.setItem(options.name, options.value);
        }
    }
    // 獲取數值
    function getItem(name) {
        let item = localStorage.getItem(name);
        // 判斷 item 是否存在 
        if (item) {
            // 先將取到的對象 看能轉換成object 對象格式，不能就說明不是json字符串形式
            try {
                item = JSON.parse(item);
            } catch (error) {
                item = item;
            }
            // 如果有expires的值,說明設置了失效時間
            if (item.expires) {
            		// 獲取當前時間
                let now = new Date().getTime();
                // 當前的時間和存入時候的時間 進行相減 和過期時間進行比較
                // 大於就說明過期了 清除存儲  小於或者等於 就沒有過期 
                if (now - item.startTime > item.expires) {
                    localStorage.removeItem(name);
                    return false;  // 返回一個狀態值
                } else {
                    //緩存未過期，返回值
                    return item.value;
                }
            } else {
                // 沒有設置過期時間，直接返回值
                return item;
            }
        }else{
            return false; // 如果item 值爲undefined 則說明沒有存儲 返回false
        }
    }

    // 移除指定的緩存
    function removeItem(name) {
        localStorage.removeItem(name);
    }
    // 移除所有的存儲數據
    function clear() {
        localStorage.clear();
    }
    return {    // 返回 執行接口
        setItem,
        getItem,
        removeItem,
        clear
    }
})();
export default myStorage; // 導出封裝的方法

然後就是實戰了 在實際項目中使用 （這裏放到 vue腳手架中使用）
在src文件夾下 創建一個 utils文件夾 將storage.js 放進去

在組件中引入使用 這裏我放在登錄組件中進行使用

login.vue

import storage from '../../utils/storage'; // 引入封裝的 函數
// 使用格式  name 屬性 value 屬性值  expires 過期時間 
storage.setItem({name:"",value:"",expires：});
// 這裏我是把登錄返回的token放入了進去 同時設置了過期時間 10s
storage.setItem({value:res.data.token,name:'token',expires:5000})

然後就是在 router.js 路由的文件中 設置 路由守衛

router.beforeEach((to:any,from:any,next:any)=>{
// 獲取存儲的token的值  有的話 賦值 isLogin 爲true 否則 false
  const isLogin=storage.getItem('token')?true:false; 
  if(to.path=="/login"){
    next();
  }else{
    isLogin?next():next('/login');
  }
})

然後就是實際項目的演示了 爲了演示快點 我設置了 五秒的過期時間
注意 右側 localStorage的變化

我是參考下面的這個大佬的博客: 大佬選擇使用的 es6的 class 語法糖進行封裝的
想要原版的童鞋 可以去看看
https://blog.csdn.net/zhaoxiang66/article/details/86703438