Vue中使用localStorage存儲token并設置時效

相信大家平常的有的業(yè)務邏輯

就是登錄之后要把token存下來

之前的項目大多數(shù)用的都是cookie

在這次的項目我用了vue-cookies保存token

保存沒有問題 但是我需要再main.js中寫一個全局的方法需要獲取cookie中的token 這時候就發(fā)現(xiàn)了 無論是我用vue-cookies的方法 還是js原生的獲取cookie都獲取不到 百度了很多方法都沒有實現(xiàn)

于是還是決定使用 localStorage localStorage 是沒有時效設置的 所以需要自己寫一個方法來設置時效

代碼參考鏈接

https://blog.csdn.net/yunchong_zhao/article/details/106565915

首先新建一個js文件用來放封裝的方法

storage.js

let?myStorage=(function()?{
????function?setItem(params)?{//存入localStorage方法
????????//?存入的參數(shù)
????????const?obj?=?{
????????????name:?"",???//?存入的名字
????????????value:?"",???//?存入的值
????????????expires:?"",???//?過期時間
????????????startTime:?new?Date().getTime()??//存入的時間
????????}
????????const?options?=?{};//?將obj?和傳進來的params?合并??放到options里面?實現(xiàn)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?只能存儲字符串?像是數(shù)組和對象要轉(zhuǎn)換下
????????????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);
????????}
????}
????//?獲取數(shù)值
????function?getItem(name)?{
????????let?item?=?localStorage.getItem(name);
????????//?判斷?item?是否存在?
????????if?(item)?{
????????????//?先將取到的對象?看能轉(zhuǎn)換成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;??//?返回一個狀態(tài)值
????????????????}?else?{
????????????????????//緩存未過期，返回值
????????????????????return?item.value;
????????????????}
????????????}?else?{
????????????????//?沒有設置過期時間，直接返回值
????????????????return?item;
????????????}
????????}else{
????????????return?false;?//?如果item?值為undefined?則說明沒有存儲?返回false
????????}
????}

????//?移除指定的緩存
????function?removeItem(name)?{
????????localStorage.removeItem(name);
????}
????//?移除所有的存儲數(shù)據(jù)
????function?clear()?{
????????localStorage.clear();
????}
????return?{????//?返回?執(zhí)行接口
????????setItem,
????????getItem,
????????removeItem,
????????clear
????}
})();
export?default?myStorage;?//暴露方法

核心的代碼就是這些

然后引入這個js

import?setStorage?from?'yourpath/storage.js'

接下來就可以使用了

setStorage.setItem({value:yourtoken,name:'token',expires:604800000})//存儲token??過期時間是毫秒???我這里是一周

setStorage.getItem('token')//獲取token