VUE對Storage的過期時(shí)間設(shè)置,及增刪改查方式
對Storage的過期時(shí)間設(shè)置,及增刪改查
面試過程中,我們經(jīng)常會被問到storage相關(guān)的問題和操作
下邊我就基于實(shí)際項(xiàng)目開發(fā),來講述這些日常的操作問題:
原理
在儲存storage的過程中,儲存一個(gè)時(shí)間戳進(jìn)去,
再次獲取時(shí), 判斷當(dāng)前時(shí)間-儲存時(shí)的時(shí)間 是否>設(shè)置的時(shí)常,
如果超時(shí)了,清空本地的storage,反之,把正確的內(nèi)容返回出去
不多叭叭 上代碼:
根據(jù)需求,自己在合適的地方編寫代碼,我在項(xiàng)目中一般是在SRC下的 utils文件夾 創(chuàng)建一個(gè)ChangeStorage.js的文件
let storage = { /* * set 存儲方法 * @ 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)部會進(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)文章
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例,幫助大家更好的理解和學(xué)習(xí)vue,感興趣的朋友可以了解下2020-10-10Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實(shí)的 DOM 元素,下面我們來看看具體如何操作v-html指令中HTML的DOM和樣式吧2025-04-04一文搞明白vue開發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開發(fā)動態(tài)單頁應(yīng)用程序,本地安裝和環(huán)境配置是學(xué)習(xí)和使用Vue的第一步,下面這篇文章主要給大家介紹了關(guān)于vue開發(fā)者vite多環(huán)境配置的相關(guān)資料,需要的朋友可以參考下2023-06-06vue3 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