Vue3封裝localStorage基本使用示例詳解
定義和使用
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù)。
localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去刪除。
localStorage 屬性是只讀的。
提示: 如果你只想將數(shù)據(jù)保存在當(dāng)前會話中，可以使用 sessionStorage 屬性， 該數(shù)據(jù)對象臨時保存同一窗口(或標(biāo)簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標(biāo)簽頁之后將會刪除這些數(shù)據(jù)。
原生語法
window.localStorage
保存數(shù)據(jù)語法：
localStorage.setItem("key", "value");讀取數(shù)據(jù)語法：
var lastname = localStorage.getItem("key");刪除數(shù)據(jù)語法：
localStorage.removeItem("key");Vue3封裝localStorage
新建 cache.js 文件
class LocalCache {
// 添加
setCath(key: string, value: any) {
window.localStorage.setItem(key, JSON.stringify(value))
}
// 查找
getCache(key: string) {
// obj=>sting=>obj
const value = window.localStorage.getItem(key)
if (value) {
return JSON.parse(value)
}
}
// 刪除
deleteCatch(key: string) {
window.localStorage.removeItem(key)
}
// 清理
clearCache() {
window.localStorage.clear()
}
}
export default new LocalCache()示例
先引入封裝好的文件
例：import LocalCache from '@/utils/cache'
查詢本地緩存
const obj = reactive({
name: LocalCache.getCache("name") ?? "",
password: LocalCache.getCache("password") ?? "",
});
console.log('obj',obj.name);添加
LocalCache.setCath('name', account.name)
LocalCache.setCath('password', account.password)刪除本地緩存
LocalCache.deleteCatch('name')
LocalCache.deleteCatch('password')到此這篇關(guān)于Vue3封裝localStorage-基本使用的文章就介紹到這了,更多相關(guān)Vue3 localStorage使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項目中,main.js,App.vue,index.html的調(diào)用方法
今天小編就為大家分享一篇vue項目中,main.js,App.vue,index.html的調(diào)用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)折線圖，可按時間查詢，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
使用sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題
localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當(dāng)瀏覽器關(guān)閉時會話結(jié)束，有時間期限，具有自行百度。本文使用的是sessionStorage解決vuex在頁面刷新后數(shù)據(jù)被清除的問題,需要的朋友可以參考下2018-04-04
vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)
這篇文章主要介紹了vue在.js文件中如何進(jìn)行路由跳轉(zhuǎn)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue中實現(xiàn)回車鍵登錄功能,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
詳解vue中v-model和v-bind綁定數(shù)據(jù)的異同
這篇文章主要介紹了vue中v-model和v-bind綁定數(shù)據(jù)的異同,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
本篇文章主要介紹了Vue-Router進(jìn)階之滾動行為詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue踩坑記-在項目中安裝依賴模塊npm install報錯
這篇文章主要介紹了vue踩坑記-在項目中安裝依賴模塊npm install報錯，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04