VUE對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查方式
對(duì)Storage的過(guò)期時(shí)間設(shè)置,及增刪改查
面試過(guò)程中,我們經(jīng)常會(huì)被問(wèn)到storage相關(guān)的問(wèn)題和操作
下邊我就基于實(shí)際項(xiàng)目開(kāi)發(fā),來(lái)講述這些日常的操作問(wèn)題:
原理
在儲(chǔ)存storage的過(guò)程中,儲(chǔ)存一個(gè)時(shí)間戳進(jìn)去,
再次獲取時(shí), 判斷當(dāng)前時(shí)間-儲(chǔ)存時(shí)的時(shí)間 是否>設(shè)置的時(shí)常,
如果超時(shí)了,清空本地的storage,反之,把正確的內(nèi)容返回出去
不多叭叭 上代碼:
根據(jù)需求,自己在合適的地方編寫(xiě)代碼,我在項(xiàng)目中一般是在SRC下的 utils文件夾 創(chuàng)建一個(gè)ChangeStorage.js的文件
let storage = {
/*
* set 存儲(chǔ)方法
* @ param {String} key 鍵
* @ param {String} value 值,
* @ param {String} expired 過(guò)期時(shí)間,以毫秒為單位,非必須
*/
set(key, val, expired) {
let obj = {
data: val,
time: Date.now(),
expired
}
localStorage.setItem(key, JSON.stringify(obj));
},
/*
* set 獲取方法
* @ param {String} key 鍵
*/
get(key) {
let val = localStorage.getItem(key);
if (!val) {
return val;
}
val = JSON.parse(val);
if (Date.now() - val.time > val.expired) {
localStorage.removeItem(key);
return null
}
return val.data;
},
/*
* remove 刪除方法
* @ param {String} key 鍵
*/
remove(key) {
localStorage.removeItem(key);
},
}
export default storage;
如何使用
全局使用
1.在main.js種引入
import storage from "文件路徑"http://引入 Vue.prototype.$storage=storage;//加入vue的原型對(duì)象
2.使用
在任何文件中 都可直接
this.$storage.set("userId",'tom',1000000)//創(chuàng)建 OR修改,并在創(chuàng)建時(shí)給一個(gè)過(guò)期時(shí)間限制
this.$storage.get("userId",)//獲取時(shí),內(nèi)部會(huì)進(jìn)行判斷,當(dāng)前獲取的內(nèi)容是否過(guò)期
this.$storage.remove("userId")//刪除局部使用
1.在該文件(vue組件 js文件種)引用
import Storage from "文件路徑"http://引入
2.使用
Storage.set("userId",'jack',1000)//創(chuàng)建 OR修改
Storage.get("userId",)//獲取
Storage.remove("userId")//刪除總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue監(jiān)聽(tīng)localstorage變化的方法詳解
- 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
- Vue中l(wèi)ocalStorage的用法和監(jiān)聽(tīng)localStorage值的變化
- vue實(shí)現(xiàn)監(jiān)聽(tīng)localstorage值變化
- Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁(yè)面后狀態(tài)依然保持)
- vue中LocalStorage與SessionStorage的區(qū)別與用法
- Vue封裝localStorage設(shè)置過(guò)期時(shí)間的示例詳解
相關(guān)文章
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-10-10
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來(lái)看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04
一文搞明白vue開(kāi)發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開(kāi)發(fā)動(dòng)態(tài)單頁(yè)應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開(kāi)發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3 watch和watchEffect的使用以及有哪些區(qū)別
這篇文章主要介紹了vue3 watch和watchEffect的使用以及有哪些區(qū)別,幫助大家更好的理解和學(xué)習(xí)vue框架,感興趣的朋友可以了解下2021-01-01
談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系
本篇文章主要介紹了談?wù)刅UE種methods watch和compute的區(qū)別和聯(lián)系,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08

