VUE對Storage的過期時(shí)間設(shè)置,及增刪改查方式
更新時(shí)間：2024年02月29日 08:39:54 作者：廣州第22號吳彥祖
這篇文章主要介紹了VUE對Storage的過期時(shí)間設(shè)置,及增刪改查方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
對Storage的過期時(shí)間設(shè)置，及增刪改查
面試過程中，我們經(jīng)常會(huì)被問到storage相關(guān)的問題和操作
下邊我就基于實(shí)際項(xiàng)目開發(fā)，來講述這些日常的操作問題：
原理
在儲(chǔ)存storage的過程中，儲(chǔ)存一個(gè)時(shí)間戳進(jìn)去，
再次獲取時(shí)， 判斷當(dāng)前時(shí)間-儲(chǔ)存時(shí)的時(shí)間 是否>設(shè)置的時(shí)常，
如果超時(shí)了，清空本地的storage，反之，把正確的內(nèi)容返回出去
不多叭叭 上代碼：
根據(jù)需求，自己在合適的地方編寫代碼，我在項(xiàng)目中一般是在SRC下的 utils文件夾 創(chuàng)建一個(gè)ChangeStorage.js的文件
let storage = {
/*
* set 存儲(chǔ)方法
* @ param {String} key 鍵
* @ param {String} value 值，
* @ param {String} expired 過期時(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的原型對象
2.使用
在任何文件中 都可直接
this.$storage.set("userId",'tom',1000000)//創(chuàng)建 OR修改,并在創(chuàng)建時(shí)給一個(gè)過期時(shí)間限制
this.$storage.get("userId",)//獲取時(shí),內(nèi)部會(huì)進(jìn)行判斷,當(dāng)前獲取的內(nèi)容是否過期
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)聽localstorage變化的方法詳解
- 教你在Vue3中使用useStorage輕松實(shí)現(xiàn)localStorage功能
- Vue中l(wèi)ocalStorage的用法和監(jiān)聽localStorage值的變化
- vue實(shí)現(xiàn)監(jiān)聽localstorage值變化
- Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
- vue中LocalStorage與SessionStorage的區(qū)別與用法
- Vue封裝localStorage設(shè)置過期時(shí)間的示例詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡易購物車頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要介紹了Vite的原理，Vite是一個(gè)更輕、更快的web應(yīng)用開發(fā)工具，面向現(xiàn)代瀏覽，Vite創(chuàng)建的項(xiàng)目是一個(gè)普通的Vue3應(yīng)用，相比基于Vue-cli創(chuàng)建的應(yīng)用少了很多配置文件和依賴，下面基于Vite相關(guān)資料內(nèi)容，需要的朋友可以參考一下2022-02-02
Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前行變色，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue radio單選框,獲取當(dāng)前項(xiàng)(每一項(xiàng))的value值操作
這篇文章主要介紹了vue radio單選框,獲取當(dāng)前項(xiàng)(每一項(xiàng))的value值操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
何時(shí)/使用 Vue3 render 函數(shù)的教程詳解
這篇文章主要介紹了何時(shí)/使用 Vue3 render 函數(shù)的教程詳解,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Vue中Vue.extend()的使用詳解及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟
這篇文章主要介紹了Vue使用CDN引用項(xiàng)目組件，減少項(xiàng)目體積的步驟，幫助大家提高項(xiàng)目加載速度，感興趣的朋友可以了解下2020-10-10
vue前端開發(fā)輔助函數(shù)狀態(tài)管理詳解示例
vue的應(yīng)用狀態(tài)管理提供了mapState、mapGetters、mapMutations、mapActions四個(gè)輔助函數(shù)，所謂的輔助函數(shù)分別對State、Getters、Mutations、Actions在完成狀態(tài)的使用進(jìn)行簡化2021-10-10
使用ElementPlus的Table啥都好，就是沒有可編輯表格，所以這篇文章就來和大家分享一下Vue實(shí)現(xiàn)極致舒適的可編輯表格的方法，希望對大家有所幫助2023-06-06
這篇文章主要為大家詳細(xì)匯總了Vue.js常用指令及使用方法，包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11