VUE對Storage的過期時間設(shè)置,及增刪改查方式
更新時間：2024年02月29日 08:39:54 作者：廣州第22號吳彥祖
這篇文章主要介紹了VUE對Storage的過期時間設(shè)置,及增刪改查方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
對Storage的過期時間設(shè)置，及增刪改查
面試過程中，我們經(jīng)常會被問到storage相關(guān)的問題和操作
下邊我就基于實際項目開發(fā)，來講述這些日常的操作問題：
原理
在儲存storage的過程中，儲存一個時間戳進(jìn)去，
再次獲取時， 判斷當(dāng)前時間-儲存時的時間 是否>設(shè)置的時常，
如果超時了，清空本地的storage，反之，把正確的內(nèi)容返回出去
不多叭叭 上代碼：
根據(jù)需求，自己在合適的地方編寫代碼，我在項目中一般是在SRC下的 utils文件夾 創(chuàng)建一個ChangeStorage.js的文件
let storage = {
/*
* set 存儲方法
* @ param {String} key 鍵
* @ param {String} value 值，
* @ param {String} expired 過期時間，以毫秒為單位，非必須
*/
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)建時給一個過期時間限制
this.$storage.get("userId",)//獲取時,內(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在本文里小編給大家整理的是關(guān)于vue項目中引入Sass的相關(guān)知識點內(nèi)容，有需要的朋友們可以測試參考下。2019-08-08
petite-vue 是為漸進(jìn)增強(qiáng)而優(yōu)化的另一種 Vue 發(fā)行版,它提供與標(biāo)準(zhǔn) Vue 相同的模板語法和反應(yīng)性心智模型,這篇文章主要介紹了petite vue 基本使用指南,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue-router路由該如何使用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
vue3.0 的 Composition API 的使用示例
這篇文章主要介紹了vue3.0 的 Composition API 的使用示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-10-10
這一篇主要是創(chuàng)建一個vue項目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue3.x如何操作v-html指令中HTML的DOM和樣式
在 Vue3.x 中,v-html 指令用于將 HTML 字符串渲染為真實的 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-06
這篇文章主要介紹了vue3無法使用jsx的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
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)系，具有一定的參考價值，有興趣的可以了解一下2017-08-08