解決Vue_localStorage本地存儲(chǔ)和本地取值問題
更新時(shí)間：2024年07月26日 08:55:29 作者：我不是長安
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue_localStorage本地存儲(chǔ)和本地取值
Vue本地存儲(chǔ)(3種)
① localStorage(長期存儲(chǔ))
- 存：localStorage.setitem('key',data)
- 取：localStorage.getitem('key')
② sessionStorage(臨時(shí)存儲(chǔ))
- 存：sessionStorage.setitem('key',data)
- ?。簊essionStorage.getitem('key')
③ cookie(有時(shí)效性)
共同點(diǎn)
- ①都可以存儲(chǔ)，并且存儲(chǔ)只跟域名走、只存儲(chǔ)在當(dāng)前域名下。
不同點(diǎn)
?存儲(chǔ)大小不同
- ①localStoage/sessionStorage /5M
- ②cookie /4K 有時(shí)效性 如果沒有設(shè)置時(shí)間會(huì)話關(guān)閉自動(dòng)失效
- ③localStorage/不主動(dòng)刪除，數(shù)據(jù)一直在。
- ④sessionStorage/在瀏覽器打開期間存在，關(guān)閉當(dāng)前會(huì)話即清空(刷新不清除)
sessionStorage和localStorage用法基本一致，引用類型的值需要轉(zhuǎn)換成Json，我這里用localstorage來舉例。
Vue存值取值本地存儲(chǔ)
根據(jù)項(xiàng)目需求，也可以使用sessionStorage進(jìn)行存值取值
- 1.存值：sessionStorage.setItem(key,value)
sessionStorage.setItem("username",user.name)- 2.取值：sessionStorage.getItem(key);
sessionStorage.getItem("username")如果直接使用sessionStorage.setItem和sessionStorage.getItem來進(jìn)行存取對象則不能正常使用該對象，并且在Application的SessionStorage中會(huì)顯示[object object]
解決方法：轉(zhuǎn)換為json格式進(jìn)行存取
- 1.存值時(shí)轉(zhuǎn)為Json字符串存入，用JSON.stringify()
sessionStorage.setItem('userObj', JSON.stringify(user))- 2.取值轉(zhuǎn)回對象，用JSON.parse()
JSON.parse(sessionStorage.getItem('userObj'))
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Object.assign觸發(fā)watch原理示例解析
這篇文章主要為大家介紹了Object.assign觸發(fā)watch原理示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
vue中使用vue-pdf組件實(shí)現(xiàn)文件預(yù)覽及相應(yīng)報(bào)錯(cuò)解決
在需求中,經(jīng)常遇見pdf的在線預(yù)覽效果,很多pdf插件不支持vue3,或者是沒有集成翻頁放大縮小功能,比如vue-pdf,下面這篇文章主要給大家介紹了關(guān)于vue中使用vue-pdf組件實(shí)現(xiàn)文件預(yù)覽及相應(yīng)報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-09-09
很多朋友在使用vue3+echarts5技術(shù)時(shí)會(huì)遇到echarts無法綻放的問題，今天小編就給大家分享下問題描述及解決方案，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue3生命周期原理與生命周期函數(shù)簡單應(yīng)用實(shí)例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結(jié)合簡單實(shí)例形式分析了vue3的生命周期基本原理、以及各個(gè)階段的生命周期鉤子函數(shù)功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
淺析Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue中Virtual?DOM和Diff原理及實(shí)現(xiàn)的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-03-03
下面小編就為大家分享一篇iview日期控件,雙向綁定日期格式的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
最近項(xiàng)目要用到百度地圖api,好久沒用到地圖,就百度了一番,下面這篇文章主要給大家介紹了關(guān)于vue3中使用百度地圖的簡單步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇vuex actions傳遞多參數(shù)的處理方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue導(dǎo)入excel文件的兩種方式(form表單和el-upload)
最近開發(fā)遇到一個(gè)點(diǎn)擊導(dǎo)入按鈕讓excel文件數(shù)據(jù)導(dǎo)入的需求,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)入excel文件的兩種方式,分別是form表單和el-upload兩種方法,需要的朋友可以參考下2022-11-11
el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時(shí)選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01