Vue中使用localStorage存儲token并設(shè)置時(shí)效
引言
相信大家平常的有的業(yè)務(wù)邏輯,就是登錄之后要把token存下來,之前的項(xiàng)目大多數(shù)用的都是cookie,在這次的項(xiàng)目我用了vue-cookies保存token
保存沒有問題 但是我需要再main.js中寫一個全局的方法需要獲取cookie中的token 這時(shí)候就發(fā)現(xiàn)了 無論是我用vue-cookies的方法 還是js原生的獲取cookie都獲取不到 百度了很多方法都沒有實(shí)現(xiàn)
于是還是決定使用localStorage localStorage是沒有時(shí)效設(shè)置的 所以需要自己寫一個方法來設(shè)置時(shí)效
代碼參考 http://www.dbjr.com.cn/article/258870.htm
首先新建一個js文件用來放封裝的方法
storage.js
let myStorage=(function() {
function setItem(params) {//存入localStorage方法
// 存入的參數(shù)
const obj = {
name: "", // 存入的名字
value: "", // 存入的值
expires: "", // 過期時(shí)間
startTime: new Date().getTime() //存入的時(shí)間
}
const options = {};// 將obj 和傳進(jìn)來的params 合并 放到options里面 實(shí)現(xiàn)js中淺拷貝
Object.assign(options, obj, params);
// 判斷用戶是否設(shè)置了過期時(shí)間
if (options.expires) {
// 以options.name為key, options為值放進(jìn)去
localStorage.setItem(options.name, JSON.stringify(options));
} else {
// 如果 options.expires 沒有設(shè)置的話, 就判斷一下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的值,說明設(shè)置了失效時(shí)間
if (item.expires) {
// 獲取當(dāng)前時(shí)間
let now = new Date().getTime();
// 當(dāng)前的時(shí)間和存入時(shí)候的時(shí)間 進(jìn)行相減 和過期時(shí)間進(jìn)行比較
// 大于就說明過期了 清除存儲 小于或者等于 就沒有過期
if (now - item.startTime > item.expires) {
localStorage.removeItem(name);
return false; // 返回一個狀態(tài)值
} else {
//緩存未過期,返回值
return item.value;
}
} else {
// 沒有設(shè)置過期時(shí)間,直接返回值
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 過期時(shí)間是毫秒 我這里是一周
setStorage.getItem('token')//獲取token以上就是Vue中使用localStorage存儲token并設(shè)置時(shí)效的詳細(xì)內(nèi)容,更多關(guān)于Vue使用localStorage存儲token并設(shè)置時(shí)效的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03
Vue項(xiàng)目配置、切換主題顏色詳細(xì)教程(mixin+scss方式,簡單高效)
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預(yù)設(shè)的配色方案,在前端實(shí)現(xiàn)動態(tài)切換系統(tǒng)主題顏色,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼
Google 給 Chrome 瀏覽器加了一個有趣的彩蛋,本文就詳細(xì)的介紹一下Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2022-04-04
vue組件實(shí)現(xiàn)列表自動無限循環(huán)的方法
最近剛好有個功能需要實(shí)現(xiàn)列表的無限循環(huán)滾動,這篇文章主要給大家介紹了關(guān)于vue組件實(shí)現(xiàn)列表自動無限循環(huán)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue子組件關(guān)閉后調(diào)用刷新父組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03

